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

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 minule. 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. Zároveň si ukážeme i variantu přidání písma pouhým odkazem na Google Fonts.

Vyhledání fontu

Na Google Fonts vyhledáme font Poppins. Font je obvykle dostupný v různých tloušťkách. My budeme potřebovat tloušťku Regular 400 pro běžný text na stránce a Extra Bold 800 pro nadpisy. Tyto tloušťky si můžeme vybrat tlačítky "+ Select..." nebo nemusíme a tím necháme zvolené všechny varianty:

Google Fonts nám po zaklikání automaticky v pravé části stránky vygeneruje kód jak pro pravidlo @import, tak pro element <link> v případě, že bychom na font chtěli pouze odkázat.

Import fontu do naší stránky

Pokud bychom se tedy 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. Zvolené varianty fontu si můžete stáhnout zvlášť odkazem Download all v pravém panelu. Nebo si můžete stáhnout úplně celou rodinu fontu tlačítkem Download Family nahoře na stránce.

Pro fonty vytvoříme ve složce s naším webem prvni_web/ podsložku fonty/. Složku můžete vytvořit jak ve VS Code, tak v Průzkumníku Windows:

Tam rozbalíme soubory z archivu .zip, který jsme stáhli. 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 styl.css 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 navazujících kurzech, 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-family: "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:

A jak prohlížeč pozná, jak tlustý Poppins na co aplikovat? Ve výchozím stylu jsou nadpisy tučné (mají nastavenou tloušťku bold) a odstavce používají normální tloušťku (normal). Sice jsme nastavili font-family: Poppins; celému <body>, ale prohlížeč se podle tloušťky písma v daném elementu vždy podívá ještě po konkrétní variantě, kterou jsme v CSS definovali (např. s font-weight: bold;).

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. Ve styl.css 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;
}

Všimněte si, že je k oddělení desetinných míst použita tečka ., nikoli čárka ,.

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 jen:

font: 14px "Poppins";

CSS obsahuje několik takovýchto zkratkových vlastností jako je font, které umožňují nastavit několik dalších jiných vlastností najednou. Je lepší je používat, protože kód je potom kratší. Znát potřebujete obě varianty, protože je budete potkávat v cizím kódu nebo je můžete potřebovat, když budete chtít nastavit jen některé vlastnosti a zkratková vlastnost by jich vyžadovala zadat více.

3. jednotky rem

Jednotka rem funguje úplně stejně jako em. Ovšem bere se relativně k velikosti písmene M ve fontu elementu <html>, nikoli v nadřazeném elementu. Výhoda je, že tedy nezáleží, kde je daný element vložený, velikost se vždy nastaví jako násobek velikosti písma, která je nastavená elementu <html>, styluje se vždy podle tohoto 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š.