Nejprve nebylo nic a potom přišel web. Málokdo z nás si bude pamatovat jak tenkrát vypadal, ale rozhodně nebyl takový, jaký známe dnes. V počátcích šlo v HTML hlavně o prosté zobrazení textu, jejich provázanost hypertextovými odkazy a sem tam nějaký obrázek. O vzhled a fonty se nikdo moc nestaral, a vlastně ani nemohl. Když se podíváte do specifikace HTML 2.0 z roku 1994, moc toho ohledně písma nenajdete – vlastně jen tagy b, i, tt, em, u a několik dalších. Jakým fontem se vám obsah zobrazil, záleželo především na prohlížeči a operačním systému.

Až v roce 1995 přinesla verze HTML 3.2 něco víc, ale stále to nebylo nic moc. U tagu font se objevila barva a přibylo několik tagů pro zvýraznění a rozlišení textu ( strike, sub, sup, big, …). Některé prohlížeče nabízely atribut face, ale pozor, ve specifikaci není. Jako hodnota atributu face se zapsal seznam fontů. Pokud měl uživatel některé z nich na svém počítači nainstalované, použilo se. V jiných případech se použil font nastavený v prohlížeči nebo přímo v OS. Prakticky nebyla cesta, jak na stránku přenést a zobrazit svůj font a často ani využít lokálně uložené fonty.

Praktický příklad (webarchiv sahá jen do roku 1996, proto nenabídneme starší screenshot). Jak vypadal seznam dříve. Pokud se podíváte do zdrojáku, vidíte pouze něco podobného
<FONT size=-1>

Typografie přišla s CSS

Čas běžel a v roce 1997 se objevilo HTML 4.0 (a později 4.01 v roce 1999) a s sebou přineslo více změn. Jednou z nejdůležitějších byla podpora CSS. To znamenalo poměrně velké zlepšení. U tagu font se například objevil atribut face. Jako hodnota byl seznam fontů. Pokud byl některý z nich nalezen mezi lokálně instalovanými fonty, použil se. V opačném případě se použil výchozí font nastavený v prohlížeči.

Ale zároveň se díky CSS stalo využívání elementu font nedoporučované a bylo možné místo něho používat styly font-family, font-style, font-variant, font-weight a font-size. U font-family je možné uvádět více fontů, a dokonce nejen konkrétní font, ale i rodinu fontů (patkové, bezpatkové, …). Seznam se prohledával odleva, takže prohlížeč respektoval pořadí a prioritu.

CSS2 specifikuje i vlastnost @font-face, která má umožnit stahování fontů spolu se stránkou. Někdy v tuto dobu přichází Internet Explorer 4.0 a tuto vlastnost podporuje (i když ve specifikaci CSS2.1 zase není, tak ji MSIE podporuje ve všech dalších verzích). Jedná se o EOT (Embedded OpenType) fonty.

@font-face {
  font-family: Gentium;
  src: url(http://site/fonts/Gentium.eot);
}
p { font-family: Gentium, serif; }

Takovéto stahování fontů se dostalo až do specifikace CSS3 a ostatní prohlížeče je podporují až v těchto verzích: Firefox 3.5, Google Chrome 4, Safari 3.1, Opera 10. Microsoft dal volně k použití program WEFT pro převod fontů. Ale nulová podpora v ostatních prohlížečích znamenala, že se toto řešení tolik nerozšířilo. Mezitím se ale objevilo několik řešení, které umožňují fonty částečně využít.

Jak se obcházela podpora @font-face?

Web se ale posouval někam dál. Zdaleka už na něm nejde jen o vypsání textu – grafici a designéři se snaží o graficky neotřelé vzhledy stránek, a proto se fonty staly poměrně limitující vlastností. Typickým příkladem jsou třeba nadpisy – autoři webů se snažili vytvořit výrazné nadpisy. Nejdříve se to dělo prostým nahrazením nadpisu (h1, h2, …) obrázkem. To je sice na efekt hezké, ale nepraktické při tvorbě nebo úpravách – vše muselo být dopředu připravené. Další nevýhodou je velikost stránek při velkém množství takových nápisů a zvýrazněných textů, no a v neposlední řadě je potřeba dbát na přístupnost a nabízet i textovou variantu.

Časem se objevilo několik postupů, které práci přeci jen usnadňují. První zmíníme online generování obrázků nadpisů pomocí php a grafické knihovny gd. Obrázek se v případě potřeby vygeneruje, uloží na serveru a použije. V horším případě se obrázek vygeneruje a místo uložení se data odešlou přímo klientovi. Je to řešení náročnější na server, ale pohodlnější pro webmastera. Existují připravená řešení, asi nejznámější je Facelift.

Pro jeho funkci je potřeba PHP a GD knihovna, pro některé pokročilejší funkce ještě ImageMagick. Do stránky se vloží pár řádků kódu a nastaví se, které tagy má Facelift nahrazovat (standardně dělá hX nadpisy). Ukázka:

<script language="javascript" src="/path-to/facelift/flir.js"></script>
<script type="text/javascript">
FLIR.init( { path: '/path-to/facelift/' } );
FLIR.auto();
// Or, you can pass an array of selectors to the auto function to be replaced.
FLIR.auto( [ 'h1', 'h2', 'h3.special', 'strong#important' ] );
</script>

Jsou ale i další nástroje, například SIFR. SIFR nahrazuje text fontem, který je uložen v swf souboru. Je podporován od verzí IE 6, Firefox 2, Safari 2, Opera 9.62. SIFR je kombinace flashe, javascriptu a stylů. Jak vypadá výsledek se můžete podívat na stránce s oficiální demonstrací.

Dalším javascriptovým řešením je například typeface.js. Je podporován Firefoxem od verze 1.5, Safari 2 a IE 6. Do stránky se vloží pouze javascriptová knihovna a font. Ten je v souboru s příponou js, lze jej stáhnout ze stránek typeface nebo si tam zkonvertovat svůj font. Podporované jsou ttf a oet. Javascript, který text generuje, využívá canvas.

Poslední řešení, které zmíníme, je Cufón. Funguje podobně jako předešlý, podporován je v prohlížečích od verzí IE 6, Firefox 1.5, Safari 3, Opera 9.5, Google Chrome 1.0. Opět si na webu v generátoru připravíte font a pomocí javascriptu dochází k náhradám. Ukázka Cufón

Výše uvedené postupy nejsou vhodné pro dlouhé texty, ale opravdu jen pro nadpisy. U většího množství náhrad můžete pozorovat zpomalení. Dalším problémem je pak například označování textu myší (SIFR označí, CUFÓN ne) a závislost na technologiích flash a javascript.

Jak to řeší CSS3?

Vraťme se k CSS. Verze 3 přináší možnost stahovat fonty do stránek pomocí @font-face. Je možné nahrávat několik různých formátů fontů a tím se to celé trochu komplikuje, protože každý prohlížeč podporuje něco. Naštěstí se v roce 2010 Microsoft, Mozilla a Opera dohodli na formátu woff (Web Open Font Format).

S podporou jednotlivých fontů to vypadá následovně (od vypsané verze výše):

EOT - IE 4, Firefox 3.5, Google Chrome 4, Safari 3.1, Opera 10, iOS Mobile Safari 4.2
TTF - IE 9, Firefox 3.5, Google Chrome 4, Safari 3.1, Opera 10, iOS Mobile Safari 4.2
SVG - Google Chrome 4, Safari 3.1, Opera 10, iOS Mobile Safari 3.2
OTF - Safari 3.5, Opera 10, Chrome 4
WOFF - IE8, Firefox 3.6, Chrome 6

O této tématice už bylo ale na Zdrojáku několikrát psáno, v článku Jak používat písma na webu a CSS3 typografie. Pár fontů můžete najít třeba u googlu. Existuje několik webových nástrojů pro převody fontů.

Při použití těchto technik si musíte dát pozor na právní aspekt. Na webu nelze automaticky použít všechny fonty, záleží na tom, jestli autor takového písma dal k použití na webu svolení (licenci). Různě se k tomu stavějí i jednotlivé prohlížeče. Ale ani font-face není všemocný: ve Windows / IE můžete pozorovat špatné vyhlazení při použití některých formátů fontů, stejně tak ve Firefoxu.

Jeden pozorný čtenář Zdrojáku dokonce zjistil, že fonty ve Windows jsou při použití otf fontu místo ttf podstatně hezčí. Ale liší se i vyhlazování v jednotlivých verzích. Příjemně překvapila kvalitou vyhlazování poslední verze IE.

Na závěr si ukažme, jak vypadají jednotlivé formáty fontů v prohlížečích.

Vyhlazování písem podle formátu fontu

Internet Explorer 8.0 / Windows – EOT font

 

Internet Explorer 9.0 / Windows – EOT font

 

Firefox 3.6.15 / Windows – OTF font

 

Firefox 3.6.15 / Windows – TTF font

 

Chromium 9 / Linux – TTF font

Chrome / Mac OSX – TTF font

Opera 11 / Linux – TTF font

 

Safari / Mac OSX – TTF font

 

Firefox 3.6.15 / Windows – WOFF font

 

Internet Explorer 8 / Windows server – WOFF font

 

Internet Explorer 8 / Windows – WOFF font

 

Internet Explorer 9 / Windows – WOFF font

 

Firefox 3.6.15 / Linux – WOFF font