HTML & CSS pro začátečníky (část 45): Stylové písma pro stránku

Běžná varianta definice písma vypadá přibližně takto:

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

Zde je prvku body přiděleno písmo Arial. Pokud toto písmo na systému uživatele není k dispozici, přejde na Helvetica. Pokud ani Helvetica není k dispozici, prohlížeč je instruován použít alespoň písmo bezpatkové. Logicky to nelze plně kontrolovat. Nakonec tedy nemáte skutečnou kontrolu nad výsledkem. To, co jste si tak krásně připravili v GIMPu nebo Photoshopu, se možná ztratí v džungli písma. Více informací o tom, jak tento problém řešit, však následuje.

Nicméně se vraťme k klasické variantě. Níže najdete typickou definici, která upraví základní vzhled webové stránky. Pomocí definice body můžete nejprve nastavit základní nastavení písma.

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

Samozřejmě můžete dále upravit jednotlivé prvky stránky. Sem patří například nadpisy, kurzívové pasáže atd. Při tom však opět myslete na princip dědičnosti v CSS.

h1 {
   font-size: 1.6em;
}

V prohlížeči by výsledek mohl vypadat takto:

Využívání webových písem

Problém s klasickými definicemi písma je zřejmý: Nakonec nemůžete být opravdu jisti, zda písmo, které jste zadali, je skutečně k dispozici u diváka. Prohlížeče volí v případě, že písmo nenaleznou, v té nejistotě písmo, které je podobné tomu, které jste si přáli. Skutečnou kontrolu nad výsledkem tedy nemáte. Právě v tomto bodě pomůže pravidlo @font-face. Skrze něj můžete explicitně určit, jaké písmo se má použít. To funguje zásadně stejně jako u obrázků. Musíte tedy uvést cestu k souboru písma.

V moderních prohlížečích se pro @font-face používají tzv. WOFF webová písma. Tyto písma jsou podstatně menší než dříve používané formáty webových písem EOT a TTF.

Typická definice @font-face vypadá následovně:

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

U položky font-family se uvede název požadovaného písma. Zde zatím nejsou žádné speciální syntaxické vlastnosti. Skrze src:url() se udává URL adresa, pod kterou se nachází soubor webového písma. Pokud teoreticky existuje možnost, že písmo bude k dispozici u uživatelů, mělo by se navíc uvést local. Do tohoto local se zadá název 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 definici @font-face lze používat webová písma normálním způsobem.

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

Zde jsou například webová písma k dispozici

Nabízí se samozřejmě otázka, odkud získat příslušné soubory webových písem. Google hostuje mnoho těchto webových písem na stránce http://www.google.com/fonts.

Tato písma lze přímo na uvedené stránce zakomponovat.





Odkaz by vypadal následovně:

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

U položky font-family se uvede požadované webové písmo. Na uvedené stránce Google najdete tato jména a odkazy. Pokud je webové písmo začleněno, může být použito stejně jako jakékoliv jiné písmo.

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

Kdo chce, může na své stránce využít více webových písem. K tomu klikne na stránce http://www.google.com/fonts na požadovaná webová písma v položce Přidat do sbírky. Jakmile jsou všechna webová písma ve vlastní kolekci, otevře dolní oblast stránky položku Použít. Zde je přímo zobrazen druh měřiče.

Jak snadno lze používat několik webových písem, která jste předtím přidali do své sbírky, ukazuje následující příklad:

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

Jednotlivá webová písma jsou tedy zapsána za sebou oddělena svislou čárkou. Úplné volání odpovídající zvolené kolekci je zobrazeno na již zmíněné stránce Užití.

Mnoho webových písem nabízí tzv. podmnožiny jako je latinka nebo kyrilice. Abyste je explicitně zahrnuli, zadáte požadovanou podmnožinu jako hodnotu parametru.

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

Pokud se mají použít některé z těchto podmnožin, zapisují se odděleně čárkami.

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

Použití tohoto webového písma je však v celkovém kontextu ne zcela nekontroverzní. Nejprve musí být při zavolání stránky vytvořeno spojení se serverem Google. To lze obejít tím, že si stáhnete soubor webového písma a nahrajete ho na vlastní server. V každém případě však dbejte na podmínky pro použití webových písem, která chcete tímto způsobem využít.

Definice písma na ukázkové stránce

Níže najdete definice písma, které budu používat na aktuální ukázkové stránce:

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;
}

Samozřejmě můžete přidat další prvky. V tomto případě však tato syntaxe plně postačuje.