11. diel - Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň

V minulej lekcii, Triedny selektor a štylovanie textu v CSS, sme si ukázali, ako centrovať obrázky pomocou triedneho selektora a zmenu fontu písma.

Dnes budeme v HTML/CSS tutoriále pokračovať s CSS vlastnosťami pre zmenu fontu písma, tentoraz za pomoci Google fontov. Ukážeme si, ako zmeniť veľkosť písma a priradiť mu tieň.

Google fonts

Iste ste si všimli, že moderné webové stránky využívajú veľmi často iné fonty ako tie, ktoré sme spomenuli minule. Pokiaľ budete chcieť svoj web ozvláštniť, môžete použiť font z externého zdroja. Skvelým pomocníkom sú Google Fonts. Ukážeme si teda prácu s nimi a nainštalujeme si pekný font Poppins.

Spôsoby vloženia fontu

Možností, ako pridať nový font z externého zdroja ako sú Google fonts, je niekoľko:

• Môžeme ho importovať pomocou špeciálneho pravidla @import v CSS.
• Môžeme naň odkázať pomocou <link> v hlavičke HTML súboru.
• Môžeme si font stiahnuť priamo k nám na web a pracovať s ním podobne ako napríklad s obrázkami.

Odkazovať na externé zdroje môže byť lákavo jednoduché. Dobrá praktika však je spoliehať sa pri ostrých weboch čo najmenej na ostatné stránky. Nemusí sa to zdať pravdepodobné, ale v minulosti sa už niekoľkokrát stalo, že aj Google mal niekoľkohodinový výpadok alebo bol preťažený.

My teda zvolíme tretí variant a font si stiahneme. Zároveň si ukážeme aj variant pridania písma jednoduchým odkazom na Google Fonts.

Vyhľadanie fontu

Na Google Fonts vyhľadáme font Poppins. Font je obvykle dostupný v rôznych hrúbkach. My budeme potrebovať hrúbku Regular 400 pre bežný text na stránke a Extra Bold 800 pre nadpisy. Tieto hrúbky si môžeme vybrať tlačidlami "+ Select..." alebo nemusíme a tým necháme zvolené všetky varianty:

Google Fonts nám po zaklikaní automaticky v pravej časti stránky vygeneruje kód ako pre pravidlo @import, tak pre element <link> v prípade, že by sme na font chceli iba odkázať.

Import fontu do našej stránky

Pokiaľ by sme sa teda rozhodli na font len odkázať, stačilo by na začiatok nášho CSS súboru pridať jediný riadok:

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

A teraz by sme mohli už font „Poppins“ používať.

Stiahnutie fontu do zložky

My ale pôjdeme istejšou cestou a font si stiahneme. Zvolené varianty fontu si môžete stiahnuť zvlášť odkazom Download all v pravom paneli. Alebo si môžete stiahnuť úplne celú rodinu fontu tlačidlom Download Family hore na stránke.

Pre fonty vytvoríme v priečinku s naším webom first_web/ podzložku fonts/. Zložku môžete vytvoriť ako vo Visual Studio Code, tak v Prieskumníkovi Windows:

Tam rozbalíme súbory z archívu .zip, ktorý sme stiahli. Mali by sme tam mať predovšetkým spomínané súbory Poppins-ExtraBold.ttf a Poppins-Regular.ttf:

Pridanie fontov do CSS pomocou @font-face

Teraz si do nášho CSS súboru style.css pridáme ďalší kód a to na úplný začiatok. Pomocou špeciálneho pravidla font-face si definujeme nový font s názvom Poppins, aby sme ho mohli používať pri štýlovaní:

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

Najdôležitejšími vlastnosťami tohto pravidla sú:

• font-family na určenie názvu fontu, ktorým sa na tento font budeme odkazovať.
• src s cestou k súboru so samotným fontom. Cesty k súborom zapisujeme v CSS pomocou funkcie url().
• Hrúbka písma, pre akú sa má font z odkazovaného súboru použiť, ktorú definujeme vlastností font-weight. Ako môžeme vidieť, jeden nami definovaný font môže podporovať niekoľko hrúbok. Viac sa týmto pravidlám venujeme v nadväzujúcich kurzoch, v lekciách Text a písmo - Farba a typ písma a Text a písmo - Veľkosť, štýl, dekorovanie, výška riadku.

Elementom nastavujeme hrúbku písma taktiež pomocou vlastnosti font-weight.

Nastavenie fontu webu

A sme vo finále Teraz môžeme font "Poppins" používať. V selektore body ho konečne nastavíme celému webu:

body {
    font-family: "Poppins";
}

A nezabudnime vymazať font-family: Arial; zo selektorov nadpisov. Celý náš súbor style.css teraz vyzerá takto:

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

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

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

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

.centered {
    text-align: center;
}

A naša stránka teraz vyzerá takto:

A ako prehliadač spozná, ako tučný Poppins na čo aplikovať? V predvolenom štýle sú nadpisy tučné (majú nastavenú hrúbku bold) a odseky používajú normálnu hrúbku (normal). Síce sme nastavili font-family: Poppins; celému <body>, ale prehliadač sa podľa hrúbky písma v danom elemente vždy pozrie ešte po konkrétnom variante, ktorý sme v CSS definovali (napríklad s font-weight: bold;).

Vlastnosť font-size - Veľkosť písma

Veľkosť písma nastavujeme pomocou vlastnosti font-size. Podobne ako pri farbách máme niekoľko možností, ako veľkosť zadať. Sú to najmä:

• pixely,
• jednotky em,
• jednotky rem.

1. Pixely

Prvou možnosťou je zadať veľkosť textu v pixeloch. V style.css nastavme všetkému textu v <body> veľkosť písma 14 pixelov:

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

Výhoda je, že font bude všade rovnako veľký, čo sa hodí najmä na nastavenie hlavného písma pre celé <body>. Pridali sme ešte farbu písma (vlastnosť color).

2. jednotky em

Druhým spôsobom, ako veľkosť zadať, sú tzv. jednotky em. Hodnota zadaná pomocou em označuje, koľkokrát je písmo väčšie ako veľkosť písmena "M" súčasného písma. Ide teda o jednotku relatívnu. Výhodné je všade používať em, pretože keď sa rozhodneme pre väčšie písmo našej stránky, zmeníme len písmo pre <body> a všetky ďalšie písma sa nám zväčšia samé. Nastavme si nadpis <h2> o niečo väčší, na hodnotu 1.7em (teda o 70% väčší, než súčasný text):

h2 {
    font-size: 1.7em;
}

Všimnite si, že je na oddelenie desatinných miest použitá bodka ., nie čiarka ,.

A výsledok na našej stránke:

Všimnite si, že robíme skutočne len malé zmeny. Nie je dôvod, prečo robiť nadpisy krikľavo červené a dvojmetrové.

Nastavenie veľkosti a fontu písma sa väčšinou spája do jednej CSS vlastnosti font. Miesto:

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

Teda môžeme napísať len:

font: 14px "Poppins";

CSS obsahuje niekoľko takýchto skratkových vlastností ako je font, ktoré umožňujú nastaviť niekoľko ďalších iných vlastností naraz. Je lepšie ich používať, pretože kód je potom kratší. Poznať potrebujete oba varianty, pretože ich budete stretávať v cudzom kóde alebo ich môžete potrebovať, keď budete chcieť nastaviť len niektoré vlastnosti a skratková vlastnosť by ich vyžadovala zadať viac.

3. jednotky rem

Jednotka rem funguje úplne rovnako ako em. Berie sa však relatívne k veľkosti písmena M vo fonte elementu <html>, nie v nadradenom elemente. Výhoda je, že teda nezáleží, kde je daný element vložený, veľkosť sa vždy nastaví ako násobok veľkosti písma, ktorá je nastavená elementu <html>, štyluje sa vždy podľa tohto rovnakého elementu.

Vlastnosť text-shadow - Tieň písma

Písmu môžeme veľmi jednoducho pridať tieň pomocou CSS vlastnosti text-shadow. Ukážme si to napríklad na našich nadpisoch (neskôr môžeme túto vlastnosť zase odobrať):

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

Parametre sú:

• Prvé 2 parametre sú pozície tieňa. Hovoríme, že leží 3 pixely napravo od textu a 3px dole.
• Tretí parameter je rozostrenie, čím vyššia hodnota, tým je text rozostrenejší. Pri hodnote 1px je ostrý.
• Posledným parametrom je farba, tu šedá.

Výsledok:

Tieňov môže mať písmo aj viac ako len jeden. Definície viacerých tieňov píšeme taktiež do vlastnosti text-shadow, akurát ich oddeľujeme čiarkou. Skúsme si písmu pridať ešte druhý svetlomodrý tieň:

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

Platí, že neskôr zadaný tieň sa vykreslí hlbšie ako predtým zadaný tieň. Svetlomodrý tieň sa teda vykreslí nad pôvodným tieňom, pretože je zapísaný skôr:

Pri písme sa toho dá štylovať naozaj veľa. To najzákladnejšie sme si ukázali, kompletný popis nájdete ako vždy v tunajšom CSS 3 kurze - Text a písmo.

Nezabudnite vložiť link na style.css do všetkých HTML podstránok, inak sa vám na nich štýly nezobrazia

V budúcej lekcii, HTML layout, začneme pracovať na layoutu, teda rozložení stránky na navigačné menu, obsahovú časť a pätičku.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.