Kaskádové styly – fonty

V minulých dvou dílech jsem si ukázali naprosté základy, které nám umožňují s CSS styly více experimentovat. V tomto díle budeme zkoumat, jak můžeme nastavit různé druhy tvarů písem – fontů.

Pro nastavování druhů písma (fontů) máme v CSS kaskádových stylech možnost použít vlastnost font-family. Samotný styl, který nastavuje font se používá velice snadno. Například následujícím zápisem nastavíme všechny texty uvnitř značky b na font Arial:

B { font-family: Arial; }

Můžete tento zápis použít například na text:

Příklad <b>textu</b>

Výsledek je tento: Příklad textu

Jak vidíte, font se nastavuje v principu velmi jednoduše. Věc je ale trochu složitější, než se zdá. Ovšem nemůžou za to CSS kaskádové styly. Může za to prostě fakt, že nikdy nemáte zaručeno, jaké fonty bude mít k dispozici čtenář vašich stránek na svém počítači. Na to byste neměli nikdy zapomínat při tvorbě vašich webových stránek. Předepíšete-li například, že se má použít font Tahoma, nemusí ho případný čtenář vašich stránek mít.

Co se tedy stane, pokud na svých stránkách předepíšete font, který čtenář vaší stránky nemá k dispozici? Je to jednoduché, předepsání fontu se bude ignorovat. Stránky se zobrazí tak, jako kdybyste žádný font nikdy neurčili. Závěrem je tedy nutné říci, že je potřeba se nad tvorbou stránky zamýšlet a myslet i na ty, kteří sedí i jiného operačního systému a s jinými fonty, než máte vy.

Problémy s fonty trpí poměrně dost webových stránek. Existují některé prostředky pro tvorbu webových stránek, které si o problémy s fonty přímo říkají. Klasickým příkladem jsou HTML stránky napsané v Microsoft Wordu. Obecně se dá říci, že více k problémům s fonty svádí vizuální prostředky, jako ntřeba Microsoft Front Page, než při ruční tvorbě HTML kódu, kde jste nuceni více přemýšlet.

Jak tedy správně postupovat? Tvůrci CSS kaskádových stylů si tento problém dobře uvědomovali, a proto rozdělili všechny fonty do pěti skupin, a každou skupinu nazvali tzv. generickými jmény. Skupiny jsou přehledně uvedeny v následující tabulce:

generické jméno popis serif patkové písmo sans-serif bezpatkové písmo cursive skloněné písmo – kurzíva fantasy ozdobné písmo monospace neproporcionální písmo

Můžete se tedy rozhodnout, že chcete mít bezpatkové písmo, a potom stačí napsat:

B { font-family: sans-serif; }

Tento zápis bude proveden tak, že prohlížeč najde font, který nejlépe odpovídá bezpatkovému písmu z těch fontů, které má čtenář nainstalován. Například u našeho příkladu to asi bude font Arial na systémech Windows, nebo Helvetica v jiných systémech, případně jiný font.

To je situace, která ještě není dostatečná. Pokud se znovu podíváte do tabulky s přehledem pěti skupin fontů, zjistíte zároveň jak je váš prohlížeč zobrazí. Většinou ne vždy nejlépe. Proto se častěji používá metoda, kdy je uveden seznam možných fontů:

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

Tento zápis říká, že pokud má čtenář k dispozici font Arial, použije se font Arial. Pokud ne, podíváme se, zda má k dispozici font s názvem Helvetica. Pokud ani ta není, použije se generické jméno sans-serif, a prohlížeč sám nějaký bezpatkový font najde.

A toto je správné řešení problému. Máte zaručeno, že se vždy najde vhodný font, a vaše stránka bude co nejlépe zobrazena podle záměru autora. Snažte se proto vždy, když použijete nějaký font, uvést na konci generické jméno fontu.

Na závěr je ještě nutné říci, že existují praxí prověřené skupiny fontů, které je dobré používat na stránkách. Pokud potřebujete zobrazit bezpatkový font typu Arial v českém jazyce, používejte ověřený zápis:

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

A to je pro tento díl o kaskádovacích stylech vše.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.