Stahovatelné fonty poprvé

22. října 2003

•

Nastavení fontů je jedním z úskalí webdesignu. Obvykle se použije některý z fontů, o němž se dá předpokládat, že bude na většině systémů, doplní se několika alternativami a pro jistotu se přidá i font generický. Pak už můžeme jen doufat, že cílový prohlížeč zobrazí naši stránku v přijatelné formě. Ale co na to jít jinak? Proč raději ke stránce nepřidat fonty v externím souboru a pak je využívat bez ohledu na systém?

V následujícím dvojdílném článku se budu zabývat problematikou stahovatelných fontů. V první části si řekneme, k čemu jsou vlastně dobré, a ukážeme si základní CSS2 konstrukce pro práci s nimi.

K čemu je to dobré

Nejlépe hned na začátek je vhodné si položit otázku, k čemu a zdali vůbec potřebujeme stahovatelné fonty. Moje odpověď bude možná trochu překvapivá, ale v normálních případech je jejich použití naprostá zbytečnost. Kaskádové styly a prohlížeče nám poskytují relativně silný mechanismus, jak textu na stránce přiřadit správný font včetně záchranné brzdy v podobě generických fontů. Sice si výsledkem nikdy nemůžete být stoprocentně jisti, ale v drtivé většině případů se stránka zobrazí tak, jak předpokládáte.

Přesto se domnívám, že existují výjimečné situace, ve kterých se stahovatelný font může hodit. Jde například o stránky v cizím jazyce se speciálními znaky, které přesto chcete zpřístupnit třeba i českým uživatelům. Samozřejmě nemůžete příliš předpokládat, že by tito uživatelé měli nainstalovaný příslušný font, nebo se jen chcete pojistit. V takovém případě mohou stahovatelné fonty přijít docela vhod. A takto je třeba rozumět i tomuto článku. Nejde v žádném případě o samospásnou technologii, která najednou vyřeší všechny problémy s fonty, ale spíše o postup, který není špatné mít na paměti a zvážit jeho použití ve speciálních případech.

Podpora stahovatelných fontů

S podporou stahovatelných fontů to není zrovna nejveselejší, překvapivě (vzhledem k implementaci dalších vlastností CSS2) je podporuje pouze Internet Explorer od verze 4.0. Proto je vždy nutno brát ohled i na ostatní prohlížeče a nadefinovat i jiné fonty.

CSS2 a pravidlo font-face

K definici nového fontu se používá CSS2 @pravidlo (at-rule) @font-face (pokud se chcete dozvědět více o CSS2 @pravidlech, přečtěte si článek CSS2 – at rules aneb pravidla zavináče). Jeho teoretický zápis vypadá následovně:

@font-face {
  descriptor: value;
  descriptor: value;
  …
  descriptor: value;
}

CSS2 používá pojem descriptor (popisovač) pro vlastnosti, kterými se nadefinuje nový font. Jde o mechanismus, jak daný font co nejlépe popsat, tj. zadefinovat umístění souboru, název fontu a jeho vlastnosti. Některé určitě znáte z kaskádových stylů jako vlastnosti pro nastavení fontu daného textu, jiné jsou úplně nové.

Základní deskriptory podporované Internet Explorerem

Definice umístění fontu

Základem definice je kromě @pravidla @font-face povinný deskriptor src, který určuje, kde se nachází fyzický soubor s fontem. Jeho hodnotu bude nejčastěji tvořit známá CSS funkce url(). Mějme například soubor s fontem uložený v adresáři fonty:

@font-face {
src: url(„fonty/mujfont.eot“);
…
}

Doporučení CSS2 dokonce dovoluje jako hodnotu deskriptoru src předat i jméno již lokálně nainstalovaného fontu pomocí zápisu src: local(jmeno_fontu). Explorer ovšem tento postup nepodporuje.

Nyní se naskýtá dost zásadní otázka, jaké soubory s fonty lze vůbec použít. Přestože doporučení počítá s více typy souborů, Explorer podporuje pouze formát .eot (Embedded OpenType). O tom, co je tento formát zač a jak do něj konvertovat své fonty, se dočtete v druhém díle tohoto článku.

Formát souboru můžete přímo explicitně zadefinovat v hodnotě deskriptoru src: src: url("fonty/mujfont.eot") format("embedded-opentype");. Jednotlivá klíčová slova jsou součástí CSS2 doporučení. Pro IE je ovšem tento zápis zbytečný, protože podporuje pouze jediný formát, .eot. Navíc tomuto zápisu nerozumí a celou definici fontu považuje za neplatnou!

Nastavení jména fontu

Prozatím se nám podařilo zadefinovat cestu k souboru s fontem. Ještě je nutno určit jméno, pod kterým bude náš font vystupovat ve světě kaskádových stylů. K tomu slouží vám určitě známý deskriptor font-family, jehož hodnotu zde tvoří řetězec představující jméno fontu. Chtějme například, aby se na již zmiňovaný font mujfont.eof dalo odkazovat jménem muj_font:

@font-face {
src: url(„fonty/mujfont.eot“);
font-family: muj_font;
}

Nyní již tento název můžete normálně používat ve svých kaskádových stylech, takto např. přiřadíme všem nadpisům první úrovně písmo ze souboru mujfont.eot: h1 {font-family: muj_font;}. Pokud byste chtěli použít víceslovný název, nezapomeňte, že jej všude musíte dát do uvozovek.

Důležité je řešení konfliktních situací. Může totiž dojít k případu, že vámi nadefinované jméno již bude používat nějaký font nainstalovaný přímo v systému. Dle doporučení by měl systémový font dostat přednost před stáhnutým. Jak asi správně tušíte, Explorer to udělá přesně naopak a použije font zadefinovaný @pravidlem @font-face.

Další informace o fontu

Podle MSDN podporuje IE pouze výše zmíněné deskriptory. Zdá se však, že ve skutečnosti rozumí i následujícím dvěma. V každém případě tedy nebude na škodu, když je do definice fontu umístíte také.

Deskriptor font-style má stejný význam jako stejnojmenná CSS vlastnost. Popisuje, jaký styl písmen font obsahuje pomocí tří klíčových slov normal, italic, oblique. Narozdíl od zmíněné vlastnosti může obsahovat i více než jedno klíčové slovo. Můžete tak například zadefinovat font, který obsahuje normální znaky i kurzívu: font-style: normal, italic;. Také lze nově použít klíčové slovo all značící, že font obsahuje znaky ve všech stylech.

Podobně pracuje i deskriptor font-weight definující tloušťku fontu. Může nabývat jedné nebo více hodnot ze seznamu normal, bold, 100, 200, ..., 900. I zde můžete využít klíčového slova all, které znamená, že se font může vykreslit v jakékoli tloušťce.

Další deskriptory definované v CSS2

Následující kapitola je spíše informativní, stručně v ní pro přehled popíšu několik dalších deskriptorů, které jsou definovány v CSS2 doporučení, ale Explorer jim nerozumí a nepoužívá je.

Deskriptory analogické k CSS vlastnostem

Deskriptor font-variant poskytuje informaci o tom, zda font obsahuje i kapitálky. Může nabývat jedné nebo obou hodnot normal, small-caps.

Pro popis velikosti fontu se používá deskriptor font-size. Narozdíl od stejnojmenné vlastnosti může nabývat pouze seznamu absolutních hodnot nebo klíčového slova all značícího, že se font může použít v libovolné velikosti, což je asi nejčastější případ.

Poslední deskriptor, který zde zmíním, je font-stretch, který určuje, nakolik může být font roztažen respektive smrštěn. I zde tvoří hodnotu seznam ze slov normal, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded nebo klíčové slovo all.

Další deskriptory

Deskriptorů definovaných v doporučení CSS2 je samozřejmě mnohem více, pokrývají například problematiku Unicode, syntézu fontů nebo porovnávání fontů. Je ale zbytečné, abych se zde o nich rozepisoval, protože v současnosti neexistuje žádný prohlížeč, pro který by měly nějaký význam. Pokud máte o tuto problematiku hlubší zájem, vše potřebné najdete v CSS2 doporučení.

Příště se podíváme na @pravidlo @font-face v praxi a ztratíme nervy u nástroje WEFT firmy Microsoft, kterým lze vytvářet soubory s fonty typu .eot.