Lekce 11 - Stylování textu v CSS - Google fonty, velikost fontu a stín Nové

V minulé lekci, Třídní selektor a stylování textu v CSS, jsme si ukázali, jak centrovat obrázky pomocí třídního selektoru a změnu fontu písma.

Dnes budeme v HTML/CSS tutoriálu pokračovat s CSS vlastnostmi pro změnu fontu písma, tentokrát za pomoci Google fontů. Ukážeme si, jak změnit velikost písma a přiřadit mu stín.

Google fonts

Jistě jste si všimli, že moderní webové stránky využívají velice často jiné fonty než ty, které jsme zmínili výše. Pokud budete chtít svůj web ozvláštnit, můžete použít font z externího zdroje. Skvělým pomocníkem jsou Google Fonts. Ukážeme si tedy práci s nimi a nainstalujeme si pěkný font Poppins.

Způsoby vložení fontu

Možností, jak přidat nový font z externího zdroje jako jsou Google fonts, je několik:

• Můžeme jej importovat pomocí speciálního pravidla @import v CSS
• Můžeme na něj odkázat pomocí <link> v hlavičce HTML souboru
• Můžeme si font stáhnout přímo k nám na web a pracovat s ním podobně jako například s obrázky.

Odkazovat na externí zdroje může být lákavě jednoduché. Dobrá praktika ovšem je spoléhat se u ostrých webů co nejméně na ostatní stránky. Nemusí se to zdát pravděpodobné, ale v minulosti se již několikrát stalo, že i Google měl několikahodinový výpadek nebo byl přetížený.

My tedy zvolíme třetí variantu a font si stáhneme. Ukážeme si i variantu s odkazem na Google fonts.

Vyhledání fontu

Na Google Fonts vyhledáme a zvolíme font Poppins. Budeme potřebovat velikosti Regular pro text a Extra Bold pro nadpisy.

Google Fonts nám automaticky vygeneruje kód jak pro pravidlo @import, tak pro element <link> v případě, že bychom se přece jen chtěli na dané soubory pouze odkázat.

Import fontu do naší stránky

Pokud bychom se rozhodli na font jen odkázat, stačilo by na začátek našeho CSS souboru přidat jediný řádek:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;800&display=swap');

A nyní bychom mohli již font "Poppins" používat.

Stažení fontu do složky

My ale půjdeme jistější cestou a font si stáhneme. Varianty fontu si můžete stáhnout zvlášť když odscrollujete dolů nebo jako celou rodinu fontu tlačítkem Download Family nahoře.

Pro fonty vytvoříme ve složce s naším webem podsložku fonty/:

Tam rozbalíme soubory z archivu .zip. Měli bychom tam mít především zmíněné soubory Poppins-ExtraBold.ttf a Poppins-Regular.ttf:

Přidání fontů do CSS pomocí @font-face

Nyní si do našeho CSS souboru přidáme další kód a to na úplný začátek. Pomocí speciálního pravidla font-face si definujeme nový font s názvem Poppins, abychom jej mohli používat při stylování:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

Nejdůležitějšími vlastnostmi tohoto pravidla jsou:

• font-family k určení názvu fontu, kterým se na tento font budeme odkazovat,
• src s cestou k souboru se samotným fontem. Cesty k souborům zapisujeme v CSS pomocí funkce url().
• Tloušťka písma, pro jakou se má font z odkazovaného souboru použít, kterou definujeme vlastností font-weight. Jak můžeme vidět, jeden námi definovaný font může podporovat několik tlouštěk. Více se těmto pravidlům věnujeme v lekcích Text a písmo - Barva a typ písma a Text a písmo - Velikost, styl, dekorování, výška řádku.

Elementům nastavujeme tloušťku písma taktéž pomocí vlastnosti font-weight.

Nastavení fontu webu

A jsme ve finále Nyní můžeme font "Poppins" používat. V selektoru body jej konečně nastavíme celému webu:

body {
    font-family: "Poppins";
}

A nezapomeňme vymazat font-family: Arial; ze selektorů nadpisů. Celý náš soubor styl.css nyní vypadá takto:

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-Regular.ttf);
    font-weight: normal;
}

@font-face {
    font-family: Poppins;
    src: url(fonty/Poppins-ExtraBold.ttf);
    font-weight: bold;
}

body {
    font: 14px "Poppins";
    color: #414042;
}

h1, h2, h3, h4, h5, h6 {
    text-align: center;
    color: #0a294b;
}

.centrovany {
    text-align: center;
}

A naše stránka nyní vypadá takto:

Ve výchozím stavu mají nadpisy nastavenou tloušťku na bold a odstavce na normal. Využíváme zde tedy obě varianty našeho fontu Poppins.

Vlastnost font-size - Velikost písma

Velikost písma nastavujeme pomocí vlastnosti font-size. Podobně jako u barev máme několik možností, jak velikost zadat. Jsou to zejména:

1. pixely
2. em
3. rem

1. Pixely

První možností je zadat velikost textu v pixelech. Nastavme všemu textu v <body> velikost písma 14 pixelů:

body {
    font-family: "Poppins";
    font-size: 14px;
    color: #414042;
}

Výhoda je, že font bude všude stejně velký, což se hodí zejména pro nastavení hlavního písma pro celé <body>. Přidali jsme ještě barvu písma (vlastnost color).

2. em

Druhým způsobem, jak velikost zadat, jsou tzv. jednotky em. Hodnota zadaná pomocí em označuje, kolikrát je písmo větší než velikost písmena "M" současného písma. Jedná se tedy o jednotku relativní. Výhodné je všude používat em, jelikož když se rozhodneme pro větší písmo naší stránky, změníme jen písmo pro <body> a všechna další písma se nám zvětší sama. Nastavme si nadpis <h2> o něco větší, na hodnotu 1.7em (tedy o 70% větší, než současný text):

h2 {
    font-size: 1.7em;
}

A výsledek na naší stránce:

Všimněte si, že děláme opravdu jen malé změny. Není důvod, proč dělat nadpisy křiklavě červené a dvoumetrové.

Nastavení velikosti a fontu písma se většinou spojuje do jedné CSS vlastnosti font. Místo:

font-family: "Poppins";
font-size: 14px;

Tedy můžeme napsat:

font: 14px "Poppins";

3. jednotky rem

Jednotka rem funguje úplně stejně jako em, ovšem bere se relativně k velikosti písmene M ve fontu elementu <html>. Nezáleží tedy, kde je daný element vložený, styluje se vždy podle toho stejného elementu.

Vlastnost text-shadow - Stín písma

Písmu můžeme velmi jednoduše přidat stín pomocí CSS vlastnosti text-shadow. Ukažme si to například na našich nadpisech (později můžeme tuto vlastnost zase odebrat):

text-shadow: 3px 3px 7px #666666;

Parametry jsou:

• První 2 parametry jsou pozice stínu. Říkáme, že leží 3 pixely napravo od textu a 3px dole.
• Třetí parametr je rozostření, čím vyšší hodnota, tím je text rozostřenější. Při hodnotě 1px je ostrý.
• Posledním parametrem je barva, zde šedá.

Výsledek:

Stínů může mít písmo i více než jen jeden. Definice více stínů píšeme taktéž do vlastnosti text-shadow, akorát je oddělujeme čárkou. Zkusme si písmu přidat ještě druhý světlemodrý stín:

text-shadow: 2px 2px 0 #88abd1, 3px 3px 7px #666666;

Platí, že později zadaný stín se vykreslí hlouběji než dříve zadaný stín. Světlemodrý stín se tedy vykreslí nad původním stínem, protože je zapsaný dříve:

U písma se toho dá stylovat opravdu mnoho. To nejzákladnější jsme si ukázali, kompletní popis naleznete jako vždy ve zdejším CSS 3 kurzu - Text a písmo.

Nezapomeňte vložit link na styl.css do všech html podstránek, jinak se vám na nich styly nezobrazí.

V příští lekci, HTML layout, začneme pracovat na layoutu, tedy rozložení stránky na navigační menu, obsahovou část a patičku.

 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.