Dajbych.net


Jak používat fonty na webu

, 8 minut čtení

Web de­sign je pře­de­vším ty­po­gra­fie. 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% pre­zen­to­vány právě psa­ným tex­tem. Lví podíl na úspě­chu spo­leč­nosti Go­o­gle má mi­ni­ma­lis­tický de­sign. Jeho zá­kla­dem je text po­u­žitý v ty­po­gra­ficky čis­tém uži­va­tel­ském roz­hraní. V článku si uká­žeme, jak za­jis­tit, že bude písmo po­u­žito stejně spo­leh­livě jako na­pří­klad ob­rá­zek ve for­mátu PNG.

Písma na webu

Máme k dis­po­zici šest for­mátů pí­sem, které na webu mů­žeme po­u­žít. Prv­ním z nich je True­Doc, který po­u­ží­val Net­s­cape Na­vi­ga­tor 4. Druhý je Em­bed­ded Open­Type, pod­po­ro­vaný In­ter­net Ex­plo­re­rem od čtvrté verze. Výrobci pro­hlí­žečů Mo­zilla 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 Mo­zilla, Opera a Micro­soft do­hodli a v lednu 2010 po­dali W3C spe­ci­fi­kaci no­vého for­mátu Web Open Font For­mat.

Pro­tože WOFF zatím ještě ne­pod­po­rují všechny pro­hlí­žeče, je ne­zbytné pře­vést písmo i do jiných for­mátů. K tomu lze vyu­žít we­bo­vou apli­kaci @font-face Ge­ne­ra­tor. Nejen že kon­ver­tuje písmo do všech mož­ných for­mátů, ale do­plní i pří­klad po­u­žití. Na­víc za­řídí, že je písmo ve for­mátu Em­bed­ded Open­Type po­u­ži­telné na li­bo­volné do­méně. For­mát je totiž na­vr­žený tak, aby ně­kdo ne­mohl snadno po­u­žít písmo na ji­ném webu, než pro který je li­cen­co­váno. Proto písma vy­tvo­řená tímto ge­ne­rá­to­rem ne­fun­gují, po­kud je stránka ote­vřena z míst­ního sou­bo­ro­vého systému (file:///).

Jak na to?

Řek­něme, že chceme na svém webu po­u­žít na­pří­klad nové písmo Ubuntu. Necháme si zkon­ver­to­vat příslušné sou­bory Ubuntu-R.ttf , Ubuntu-B.ttf a Ubuntu-I.ttf. Vy­ge­ne­ro­vané CSS ve výcho­zím na­sta­vení 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 jed­no­du­chá. Ob­sahuje dva po­vinné údaje:

Kromě těchto údajů může ob­saho­vat i in­for­mace o stylu písma (font-we­i­ght, font-style či font-va­ri­ant). Mů­žeme tak různé zdro­jové sou­bory sou­stře­dit pod je­den spo­lečný ná­zev a od­ka­zo­vat na něj stan­dard­ním způ­so­bem.

Všim­něte si, že vlast­nost src je uve­dena dva­krát. Po­prvé pro In­ter­net Ex­plo­rer, který ne­bere v po­taz druhý výskyt, pro­tože ne­zná pa­ra­metr for­mat. Hod­nota je pro něj ne­platná a po­u­žije se ta první. Ostatní pro­hlí­žeče ro­zumí druhému zá­pisu, proto hod­nota src v druhém výskytu pře­píše tu první. Pa­ra­metr lo­cal má ne­smy­sl­nou hod­notu, je­li­kož je její in­ter­pre­tace ve Web­kitu a OS X ne­pří­liš dobře im­ple­men­to­vána.

Ně­komu se tento kód ne­musí lí­bit, pro­tože se po­dobá prak­ti­kám CSS hacků. Tomu, kdo je po­u­ží­val, způ­so­bily jistě mnoho problémů. Al­ter­na­tivní ře­šení je udě­lat vět­vení na jed­not­livé sou­bory o úro­veň výš. Proti tomu lze ale namít­nout, že se za­vádí roz­dílné ro­diny písma ni­koli na zá­kladě vzhledu, ale na sou­bo­ro­vém for­mátu. Jiný způ­sob zá­pisu může vy­pa­dat na­pří­klad 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 ele­ment body říká pro­hlí­žeči, aby zkou­šel jed­not­livé formáty a po­u­žil první pod­po­ro­vaný. Písma se stahují po­stupně, takže mo­derní pro­hlí­žeče stáh­nou jen sadu ve for­mátu WOFF.

Co lze ovšem velmi do­po­ru­čit, je se­sku­pení všech řezů písma pod je­den ná­zev. Ro­dina písma je pak uve­dena tři­krát vždy s kon­krét­ním ře­zem písma. Dá se toho do­cí­lit také pa­t­řič­ným na­sta­ve­ním ge­ne­rá­toru. Neméně dů­le­žité je na­sta­vit (mož­nost sub­set­ting), aby se do písma za­hr­nuly jen ty znaky, které na webu sku­tečně vyu­ži­jeme. Dané písmo pak ne­bude tak ve­liké a uži­va­te­lům se stránka na­čte o něco dříve.

Se­sku­pení pí­sem pod je­den ná­zev s různými vlast­nostmi 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 ta­ko­vouto de­fi­nicí lze pak písma po­u­ží­vat stej­ným způ­so­bem jako systé­mová, tj. vyu­ží­vat všech výhod kaská­do­vání. Mů­žete si např. na­sta­vit ro­dinu písma pro ele­ment p a díky jed­not­nému jménu do­káže pro­hlí­žeč správně nalo­žit s tagy jako i či strong, které mění výchozí vlast­nosti písma.

Závěrem

Pro pro­hlí­žeče, které ještě ne­znají WOFF, ne­e­xis­tuje sto­pro­centně správný a uni­ver­zální zá­pis CSS. Kodér musí na zá­kladě svých zku­še­ností do­cí­lit toho, aby si každý pro­hlí­žeč stáhl písmo ve for­mátu, který nej­lépe pod­po­ruje. Je tedy na vás, jaký zá­pis CSS si zvo­líte a jak ho upra­víte, aby byl na va­šem webu účelný.

Web Open Font For­mat je snad nej­rych­leji im­ple­men­tovaná spe­ci­fi­kace. V této chvíli (lis­to­pad 2010) ji pod­po­ruje už In­ter­net Ex­plo­rer, Fi­re­fox a Chrome. Roz­hodně tedy ne­u­dě­láme chybu, když do bu­doucna vsadíme právě na tento for­mát. Na­neštěstí iPhone a iPad pod­po­rují jen for­mát SVG. Jeho po­u­žití pro písmo však není pří­liš vhodné. Chybí mu totiž jedna zá­sadní do­ved­nost – vyrov­nání me­zer mezi pís­meny. In­ter­net Ex­plo­rer 8 a starší ro­zumí jen for­mátu Em­bed­ded Open­Type. Na­proti tomu True­Type fun­guje v pro­hlí­že­čích Fi­re­fox, Chrome, Opera a Sa­fari.

Ty­po­gra­fie ale ne­spo­čívá jen ve správné volbě písma. Dů­le­žité je také po­u­ží­vat správné znaky. Vě­dět, že se spo­jov­ník liší od po­mlčky a ne­plést si palce s uvo­zov­kami. Dávno už nejsme ome­zeni po­č­tem klá­ves či kó­do­vá­ním AS­CII. Neméně pod­statné je také zamys­let se nad vyu­ži­tím mož­nosti dě­lení slov v HTML v úzkých sloup­cích textu.

Člá­nek byl se­psán pro Zdro­ják.