Dajbych.net


Jak používat fonty na webu

, 7 minut čtení

Web de­sign je přede­vším ty­pografie. Tečka. Uži­va­tel většinu svého času, který na stránce tráví, čte právě text. In­for­mace na webu jsou totiž z 95% prezen­továny právě psaným tex­tem. Lví podíl na úspěchu společnosti Google má min­i­mal­i­stický de­sign. Jeho zák­la­dem je text použitý v ty­pograficky čistém uži­va­tel­ském rozhraní. V článku si ukážeme, jak za­jis­tit, že bude písmo použito ste­jně spoleh­livě jako napřík­lad obrázek ve for­mátu PNG.

Písma na webu

Máme k dis­pozici šest for­mátů písem, které na webu můžeme použít. Prvním z nich je True­Doc, který použí­val Nets­cape Nav­i­ga­tor 4. Druhý je Em­bed­ded Open­Type, pod­porovaný In­ter­net Ex­plor­erem od čtvrté verze. Výrobci proh­lížečů Mozilla a Opera zvo­lili for­máty True­Type a Open­Type. Vlastní am­bice na poli písem měl i for­mát SVG. Naštěstí se Mozilla, Opera a Mi­crosoft do­hodli a v lednu 2010 po­dali W3C speci­fikaci nového for­mátu Web Open Font For­mat.

Pro­tože WOFF zatím ještě nepod­porují všechny proh­lížeče, je nezbytné převést písmo i do jiných for­mátů. K tomu lze využít we­bovou ap­likaci @font-face Gen­er­a­tor. Ne­jen že kon­ver­tuje písmo do všech možných for­mátů, ale do­plní i přík­lad použití. Navíc zařídí, že je písmo ve for­mátu Em­bed­ded Open­Type použitelné na li­bo­volné doméně. For­mát je totiž navržený tak, aby někdo nemohl snadno použít písmo na jiném webu, než pro který je li­cen­cováno. Proto písma vytvořená tímto gen­erá­torem ne­fun­gují, pokud je stránka otevřena z míst­ního souborového sys­tému (file:///).

Jak na to?

Řekněme, že chceme na svém webu použít napřík­lad nové písmo Ubuntu. Necháme si zkon­ver­to­vat přís­lušné soubory Ubuntu-R.ttf , Ubuntu-B.ttf a Ubuntu-I.ttf. Vy­gen­erované CSS ve vý­chozím nas­tavení vy­padá násle­dovně:

@font-face { font-family: 'UbuntuRegular'; src: url('ubuntu-r-webfont.eot'); src: local('☺'), url('ubuntu-r-webfont.woff') format('woff'), url('ubuntu-r-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'UbuntuItalic'; src: url('ubuntu-i-webfont.eot'); src: local('☺'), url('ubuntu-i-webfont.woff') format('woff'), url('ubuntu-i-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'UbuntuBold'; src: url('ubuntu-b-webfont.eot'); src: local('☺'), url('ubuntu-b-webfont.woff') format('woff'), url('ubuntu-b-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; }

Syn­taxe di­rek­tivy @font-face je jedn­oduchá. Ob­sahuje dva povinné údaje:

Kromě těchto údajů může ob­sa­ho­vat i in­for­mace o stylu písma (font-weight, font-style či font-vari­ant). Můžeme tak různé zdro­jové soubory soustředit pod je­den společný název a od­ka­zo­vat na něj stan­dard­ním způ­sobem.

Všim­něte si, že vlast­nost src je uve­dena dvakrát. Poprvé pro In­ter­net Ex­plorer, který nebere v potaz druhý výskyt, pro­tože nezná parametr for­mat. Hod­nota je pro něj ne­platná a použije se ta první. Ostatní proh­lížeče rozumí druhému zápisu, proto hod­nota src v druhém výskytu přepíše tu první. Parametr lo­cal má nes­mysl­nou hod­notu, je­likož je její in­ter­pre­tace ve We­bk­itu a OS X nepříliš dobře im­ple­men­tována.

Někomu se tento kód ne­musí líbit, pro­tože se podobá prak­tikám CSS hacků. Tomu, kdo je použí­val, způ­so­bily jistě mnoho prob­lémů. Al­ter­na­tivní řešení je udělat větvení na jed­notlivé soubory o úroveň výš. Proti tomu lze ale namít­nout, že se zavádí rozdílné rodiny písma nikoli na zák­ladě vzh­ledu, ale na souborovém for­mátu. Jiný způ­sob zápisu může vy­pa­dat napřík­lad takto:

/* Web Open Font Format */ @font-face { font-family: Ubuntu WOFF; src: url(Ubuntu-R.woff); } @font-face { font-family: Ubuntu WOFF; src: url(Ubuntu-I.woff); font-style: italic; } @font-face { font-family: Ubuntu WOFF; src: url(Ubuntu-B.woff); font-weight: bold; } /* Embedded OpenType */ @font-face { font-family: Ubuntu EOT; src: url(Ubuntu-R.eot); } @font-face { font-family: Ubuntu EOT; src: url(Ubuntu-B.eot); font-weight: bold; } @font-face { font-family: Ubuntu EOT; src: url(Ubuntu-I.eot); font-style: italic; } /* TrueType */ @font-face { font-family: Ubuntu TTF; src: url(Ubuntu-R.ttf); } @font-face { font-family: Ubuntu TTF; src: url(Ubuntu-I.ttf); font-style: italic; } @font-face { font-family: Ubuntu TTF; src: url(Ubuntu-B.ttf); font-weight: bold; } body { font-family: Ubuntu WOFF, Ubuntu EOF, Ubuntu TTF; }

CSS pro el­e­ment body říká proh­lížeči, aby zk­oušel jed­notlivé formáty a použil první pod­porovaný. Písma se stahují pos­tupně, takže moderní proh­lížeče stáh­nou jen sadu ve for­mátu WOFF.

Co lze ovšem velmi do­poručit, je sesku­pení všech řezů písma pod je­den název. Ro­d­ina písma je pak uve­dena třikrát vždy s konkrét­ním řezem písma. Dá se toho docílit také patřičným nas­tavením gen­erá­toru. Neméně důležité je nas­tavit (možnost sub­set­t­ing), aby se do písma zahr­nuly jen ty znaky, které na webu skutečně využi­jeme. Dané písmo pak neb­ude tak ve­liké a uži­vatelům se stránka načte o něco dříve.

Sesku­pení písem pod je­den název s různými vlast­nos­tmi bude vy­pa­dat takto:

@font-face { font-family: 'Ubuntu'; src: url('Ubuntu-R-webfont.eot'); src: local('☺'), url('Ubuntu-R-webfont.woff') format('woff'), url('Ubuntu-R-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Ubuntu'; src: url('Ubuntu-I-webfont.eot'); src: local('☺'), url('Ubuntu-I-webfont.woff') format('woff'), url('Ubuntu-I-webfont.ttf') format('truetype'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Ubuntu'; src: url('Ubuntu-B-webfont.eot'); src: local('☺'), url('Ubuntu-B-webfont.woff') format('woff'), url('Ubuntu-B-webfont.ttf') format('truetype'); font-weight: bold; font-style: normal; }

S takovouto definicí lze pak písma použí­vat ste­jným způ­sobem jako sys­té­mová, tj. využí­vat všech výhod kaská­dování. Můžete si např. nas­tavit rod­inu písma pro el­e­ment p a díky jed­not­nému jménu dokáže proh­lížeč správně naložit s tagy jako i či strong, které mění vý­chozí vlast­nosti písma.

Závěrem

Pro proh­lížeče, které ještě nez­nají WOFF, ne­ex­is­tuje sto­pro­centně správný a uni­verzální zápis CSS. Kodér musí na zák­ladě svých zkušeností docílit toho, aby si každý proh­lížeč stáhl písmo ve for­mátu, který ne­jlépe pod­poruje. Je tedy na vás, jaký zápis CSS si zvolíte a jak ho upravíte, aby byl na vašem webu účelný.

Web Open Font For­mat je snad ne­jrych­leji im­ple­men­tovaná speci­fikace. V této chvíli (listopad 2010) ji pod­poruje už In­ter­net Ex­plorer, Fire­fox a Chrome. Rozhodně tedy neuděláme chybu, když do bu­doucna vsadíme právě na tento for­mát. Naneštěstí iPhone a iPad pod­porují jen for­mát SVG. Jeho použití pro písmo však není příliš vhodné. Chybí mu totiž jedna zásadní doved­nost – vy­rovnání mezer mezi pís­meny. In­ter­net Ex­plorer 8 a starší rozumí jen for­mátu Em­bed­ded Open­Type. Naproti tomu True­Type fun­guje v proh­lížečích Fire­fox, Chrome, Opera a Sa­fari.

Ty­pografie ale ne­spočívá jen ve správné volbě písma. Důležité je také použí­vat správné znaky. Vědět, že se spo­jovník liší od pom­lčky a ne­plést si palce s uvo­zovkami. Dávno už ne­jsme omezeni počtem kláves či kó­dováním ASCII. Neméně pod­s­tatné je také zamyslet se nad využitím možnosti dělení slov v HTML v úzkých sloupcích textu.

Článek byl sep­sán pro Zdro­ják.