HTML a CSS pre začiatočníkov (časť 45): Štýlové písma pre stránku

Bežná verzia definície fontov vyzerá približne nasledovne:

body {
   font-family: Arial, Helvetica, sans-serif;
}

Body elementu je priradený font Arial. Ak tento font nie je k dispozícii na systéme diváka, použije sa font Helvetica. Ak ani Helvetica nie je dostupná, prehliadač bude instruovaný použiť aspoň font bez seríf. Skutočnú kontrolu to však neumožňuje. V konečnom dôsledku teda nemáte skutočnú kontrolu nad výsledkom. To, čo ste si tak pekne pripravili v programe GIMP alebo Photoshop, môže byť stratené v džungli fontov. Viac o tom, ako tento problém vyriešiť, však nájdete ďalej.

Najprv sa však vráťme k klasickému spôsobu. Nižšie nájdete typickú definíciu, ktorá upravuje základný vizuálny vzhľad webovej stránky. Pomocou definície body môžete nastaviť základné písmo.

body {
   font-family: Georgia, Times, "Times New Roman", serif;
   color: #000;
   font-size: 1.1em;
   line-height: 150%;
}
p {
   font-size: 1.1em;
}

Samozrejme môžete jednotlivé prvky stránky ďalej štýlovať. Sem patrí napríklad nadpisy, kurzíva a podobne. V tomto kontexte však nezabudnite na dedičný princíp CSS.

h1 {
   font-size: 1.6em;
}

Výsledok by mohol v prehliadači vyzerať približne takto:

Využívanie webfontov

Problém s tradičnými definíciami písma je zrejmý: Nakoniec nemôžete byť istí, že font, ktorý ste zvolili, je skutočne k dispozícii pre diváka. Prehliadače vo väčšine prípadov, ak nenájdu používaný font, si vyberú iný, ktorý sa čo najviac podobá vášmu požiadavku. Nemáte teda skutočnú kontrolu nad výsledkom. Presne v tomto bode pomáha @font-face. Pomocou neho môžete explicitne určiť font, ktorý sa použije. Tento postup vychádza z funkčnosti obrázkov. Musíte teda zadať cestu k súboru fontu.

V moderných prehliadačoch sa pre @font-face používajú tzv. WOFF-Webfonty. Tieto fonty sú podstatne menšie ako predtým používané formáty Webfontu ako EOT a TTF.

Typická definícia @font-face vyzerá nasledovne:

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Meno používaného písma je uvedené v font-family. Zatiaľ neexistujú žiadne zvláštne syntaxe. S src:url() zadávate URL, kde sa nachádza súbor fontu. Ak teoreticky existuje možnosť, že font je dostupný na počítačoch používateľov, bolo by dobré pridať aj local. Lokálnemu priradíte názov písma.

@font-face {
   font-family: "Bitstream Vera Serif Bold";
   local: "Bitstream Vera Serif Bold";
   src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}

Po definovaní @font-face môžu byť Webfonty používané úplne normálne.

h1 {
   font-family: "Bitstream Vera Serif Bold";
   font-size: 1.2em;
   color: #3399FF;
}

Tu sú príklady Webfontov

Vzniká otázka, odkiaľ získať tieto súbory Webfontu. Google napríklad hostuje mnoho týchto Webfontov na stránke http://www.google.com/fonts.

Tieto fonty je možné priamo integrovať cez uvedenú stránku.





Príslušný kód by mohol vyzerať nasledovne:

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">

V font-family sa uvádza požadovaný Webfont. Na vyššie uvedenej stránke Google nájdete tieto názvy a kódy. Po integrovaní Webfontu ho môžete použiť rovnako ako akýkoľvek iný font.

body {
   font-family: 'Tangerine', serif;
   font-size: 1.2em;
}

Kto chce, môže na svojej stránke použiť aj viacero Webfontov. Stačí kliknúť na stránke http://www.google.com/fonts na požadované Webfonty a vybrať Pridať do kolekcie. Keď máte všetky Webfonty vlastnej kolekcii, kliknite na spodnej časti stránky na Použiť. Priamo sa tam zobrazí akási formou tachometra.





Pomocou tejto ilustrácie môžete vidieť vplyv integrovaných Webfontov na rýchlosť načítania stránky. Tieto dopady sú skutočne merateľné a zvyšujú sa s každým ďalším Webfantom.

Ako jednoducho môžete použiť viacero webových písiem, ktoré ste predtým pridali do svojej kolekcie, ukazuje nasledujúci príklad:

<link href="http://fonts.googleapis.com/css?
family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">

Jednotlivé webové písiem sú teda postupne oddelené zvislou čiarou. Úplné volanie, ktoré zodpovedá zvolenej kolekcii, je zobrazené na už spomínanej stránke použitia.

Mnohé z webových písiem ponúkajú tzv. Čiastočné súbory ako Latin alebo Cyrillic. Pre ich explicitné zahrnutie uveďte požadovaný podmnožinu ako hodnotu parametra.

http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic

Ak sa majú použiť viaceré tieto podmnožiny, uveďte ich postupne oddelené čiarkami.

http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic

Použitie tohto webového písma je však predmetom úplne iného kontextu. Najprv musí byť pri volaní stránky naviazané spojenie so serverom Google. Dá sa to obísť stiahnutím súboru s webovými písmami a uložením na vlastný server. Pri tom však vždy dbajte na podmienky používania webových písiem, ktoré chcete týmto spôsobom použiť.

Nastavenie písma na ukážkovej stránke

Nižšie nájdete definície písma, ktoré budem používať na aktuálnej ukážkovej stránke:

body {
   font-family: 'Crimson Text', Helvetica, sans-serif;
   color: #444;
   text-decoration: none;
   line-height: 1.5em;
   font-size: 1.2em;
}
p { 
   font-size: 1.1em;
}
h1 {
   font-size: 1.6em;
   color: #3399FF;
}

Samozrejme môžete pridať ďalšie prvky. V súčasnom prípade však táto syntax postačuje.