11. diel - Štylovanie textu v CSS - Google fonty, veľkosť fontu a tieň
V predchádzajúcom cvičení, Riešené úlohy k 6.-9. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.
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 vyššie. 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
@importv 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.
My teda zvolíme tretí variant a font si stiahneme. Ukážeme si aj variant s odkazom na Google fonts.
Vyhľadanie fontu
Na Google Fonts vyhľadáme a zvolíme font Poppins. Budeme potrebovať veľkosti Regular pre text a Extra Bold pre nadpisy.
Google Fonts nám automaticky vygeneruje kód ako pre pravidlo
@import, tak pre element <link> v prípade, že
by sme sa predsa len chceli na dané súbory iba odkázať.
Import fontu do našej stránky
Ak by sme sa rozhodli na font len odkázať, stačilo by na začiatok nášho CSS súboru pridať jediný riadok:
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. Varianty fontu si môžete stiahnuť zvlášť keď odscrollujete dole alebo ako celú rodinu fontu tlačidlom Download Family hore.
Pre fonty vytvoríme v priečinku s naším webom podpriečinok
fonty/:
Tam rozbalíme súbory z archívu .zip. 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 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í:
Najdôležitejšími vlastnosťami tohto pravidla sú:
font-familyna určenie názvu fontu, ktorým sa na tento font budeme odkazovať,srcs cestou k súboru so samotným fontom. Cesty k súborom zapisujeme v CSS pomocou funkcieurl().- 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 lekciách Text a písmo - Farba a typ písma a Text a písmo - Veľkosť, štýl, dekorovanie, výška riadku
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:
A nezabudnime vymazať
font-family: Arial; zo selektorov nadpisov. Celý náš súbor
styl.css teraz vyzerá takto:
A naša stránka teraz vyzerá takto:
V predvolenom
stave majú nadpisy nastavenú hrúbku na bold a odseky na
normal. Využívame tu teda obe varianty nášho fontu
Poppins.
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
- em
- rem
Prvou možnosťou je zadať veľkosť textu v pixeloch. Nastavme všetkému
textu v <body> veľkosť písma 14 pixelov:
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. 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):
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:
Teda môžeme napísať:
3.
jednotky rem
Jednotka rem funguje úplne rovnako ako em, avšak
berie sa relatívne k veľkosti písmena M vo fonte elementu
<html>. Nezáleží teda, kde je daný element vložený,
štyluje sa vždy podľa toho isté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ť):
Parametre sú:
- Prvé 2 parametre sú pozície tieňa. Hovoríme, že
leží
3pixely napravo od textu a3pxdole. - Tretí parameter je rozostrenie, čím vyššia hodnota,
tým je text rozostrenejší. Pri hodnote
1pxje ostrý. - Posledným parametrom je farba, tu šedá.
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ň:
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 styl.css do všetkých
html podstránok, inak sa vám na nich štýly nezobrazia.:-)
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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 378x (2.27 MB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS
David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.