Přejít k navigační liště

Zdroják » Webdesign » Jak používat písma na webu

Jak používat písma na webu

Články Webdesign

„Web design je především typografie. Tečka.“ Informace na webu jsou totiž z 95 % prezentovány právě psaným textem. Lví podíl na úspěchu společnosti Google má minimalistický design. Jeho základem je text použitý v typograficky čistém uživatelském rozhraní. V článku si ukážeme, jak zajistit, že bude písmo použito stejně spolehlivě jako například obrázek ve formátu PNG.

Písma na webu

Máme k dispozici šest formátů písem, které na webu můžeme použít. Prvním z nich je TrueDoc, který používal Netscape Navigator 4. Druhý je Embedded OpenType, podporovaný Internet Explorerem od čtvrté verze. Výrobci prohlížečů Mozilla a Opera zvolili formáty TrueType a OpenType. Vlastní ambice na poli písem měl i formát SVG. Naštěstí se Mozilla, Opera a Microsoft dohodli a v lednu 2010 podali W3C specifikaci nového formátu Web Open Font Format.

Protože WOFF zatím ještě nepodporují všechny prohlížeče, je nezbytné převést písmo i do jiných formátů. K tomu lze využít webovou aplikaci @font-face Generator. Nejen že konvertuje písmo do všech možných formátů, ale doplní i příklad použití. Navíc zařídí, že je písmo ve formátu Embedded OpenType použitelné na libovolné doméně. Formát je totiž navržený tak, aby někdo nemohl snadno použít písmo na jiném webu, než pro který je licencováno. Proto písma vytvořená tímto generátorem nefungují, pokud je stránka otevřena z místního souborového systému (file:///).

Jak na to?

Řekněme, že chceme na svém webu použít například nové písmo Ubuntu (toto písmo je možno použít bez problémů, jeho licence to umožňuje – více o licencích v předchozím článku o písmech). Necháme si zkonvertovat příslušné soubory Ubuntu-R.ttf , Ubuntu-B.ttf a Ubuntu-I.ttf. Vygenerované CSS ve výchozím nastavení vypadá následovně:

@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;
}

Syntaxe direktivy @font-face je jednoduchá. Obsahuje dva povinné údaje:

  • font-family  – název, pod jakým bude písmo dostupné
  • src  – odkaz na URI písma

Kromě těchto údajů může obsahovat i informace o stylu písma: font-weight, font-style či font-variant. Můžeme tak různé zdrojové soubory soustředit pod jeden společný název a odkazovat na něj standardním způsobem.

Všimněte si, že vlastnost src je uvedena dvakrát. Poprvé pro Internet Explorer, který nebere v potaz druhý výskyt, protože nezná parametr format. Hodnota je pro něj neplatná a použije se ta první. Ostatní prohlížeče rozumí druhému zápisu, proto hodnota src v druhém výskytu přepíše tu první. Parametr local má nesmyslnou hodnotu, jelikož je její interpretace ve Webkitu a OS X nepříliš dobře implementována.

Někomu se tento kód nemusí líbit, protože se podobá praktikám CSS hacků. Tomu, kdo je používal, způsobily jistě mnoho problémů. Alternativní řešení je udělat větvení na jednotlivé soubory o úroveň výš. Proti tomu lze ale namítnout, že se zavádí rozdílné rodiny písma nikoli na základě vzhledu, ale na souborovém formátu. Jiný způsob zápisu může vypadat napří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-i.eot);
  font-style: italic;
}
@font-face {
  font-family: Ubuntu EOT;
  src: url(ubuntu-b.eot);
  font-weight: bold;
}
/* 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 element body říká prohlížeči, aby zkoušel jednotlivé formáty a použil první podporovaný. Písma se stahují postupně, takže moderní prohlížeče stáhnou jen sadu ve formátu WOFF.

Co lze ovšem velmi doporučit, je seskupení všech řezů písma pod jeden název. Rodina písma je pak uvedena třikrát vždy s konkrétním řezem písma. Dá se toho docílit také patřičným nastavením generátoru. Neméně důležité je nastavit (možnost subsetting), aby se do písma zahrnuly jen ty znaky, které na webu skutečně využijeme. Dané písmo pak nebude tak veliké a uživatelům se stránka načte o něco dříve.

Seskupení písem pod jeden název s různými vlastnostmi bude vypadat 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 stejným způsobem jako systémová, tj. využívat všech výhod kaskádování. Můžete si např. nastavit rodinu písma pro element p a díky jednotnému jménu dokáže prohlížeč správně naložit s tagy jako <i> či <strong>, které mění výchozí vlastnosti písma.

Závěrem

Pro prohlížeče, které ještě neznají WOFF, neexistuje stoprocentně správný a univerzální zápis CSS. Kodér musí na základě svých zkušeností docílit toho, aby si každý prohlížeč stáhl písmo ve formátu, který nejlépe podporuje. 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 Format je snad nejrychleji implementovaná specifikace. V této chvíli (listopad 2010) ji podporuje už Internet Explorer, Firefox a Chrome. Rozhodně tedy neuděláme chybu, když do budoucna vsadíme právě na tento formát. Naneštěstí iPhone a iPad podporují jen formát SVG. Jeho použití pro písmo však není příliš vhodné. Chybí mu totiž jedna zásadní dovednost – vyrovnání mezer mezi písmeny. Internet Explorer 8 a starší rozumí jen formátu Embedded OpenType. Naproti tomu TrueType funguje v prohlížečích Firefox, Chrome, Opera a Safari.

Typografie ale nespočívá jen ve správné volbě písma. Důležité je také používat správné znaky. Vědět, že se spojovník liší od pomlčky a neplést si palce s uvozovkami. Dávno už nejsme omezeni počtem kláves či kódováním ASCII. Neméně podstatné je také zamyslet se nad využitím možnosti dělení slov v HTML v úzkých sloupcích textu.

Komentáře

Subscribe
Upozornit na
guest
18 Komentářů
Nejstarší
Nejnovější Most Voted
Inline Feedbacks
View all comments
Rdm

Takových článků se opravdu bojím a můj strach je očividně oprávněný. Článek hezky popisuje možnosti načtení fontu, ale vůbec neupozorňuje na takovou podstatnou maličkost: většina fontů je zatížena autorskými právy a z nich plynoucími licenčními poplatky!

Takže se máme na co těšit…

Martin Malý

Spoléháme na to, že čtenáři udrží informaci, kterou už jednou získali (licenčním otázkám a fontům jsme se věnovali zde) a není proto v každém článku nutné opakovat totéž dokola, obzvlášť když se o tom zmiňujeme i ve zprávičkách či všude tam, kde je o fontech řeč.

Jak vidno, nutné to je.

Makovec

Je elementárním novinářským pravidlem nepředpokládat že čtenář článku četl předchozí díly seriálu a nebo souvisící články, a důležité věci a souvislosti vždy znovu stručně připomenout.

blizzboz

autorské práva? licencie? to predsa nikoho netrápi.

Marek

Zdravim, přečetl jsem si článek o dělení slov a chtěl bych na něj zareagovat: je tu nějaká možnost dělit slova automaticky? Prohlížeč by měl slovník(y) všech slov s pravidly jejich dělení a slova by dělil automaticky, tak jako to dělají programy typu MSWord/OOoWriter a TeX/LaTeX. Případně by ty značky rozdělení vložil automaticky ke všem slovům redakční systém či jiný sw na straně serveru.

Tesarik

Ano, některé redakční systémy to umějí. Bohužel výsledky bývají žalostné, pokud text obsahuje např. jména produktů, cizí slova, apod. a autoři nejsou typografové, aby po automatu správné dělení slov kontrolovali. Ono je to navíc obtížnější než u klasických textů, protože předem nevíte, jak se text zaláme…

dasim

Jedna z možností je hyphenator, javascriptová knihovna používající stejné algoritmy jako LaTeX nebo OpenOffice. Sám jsem jí ještě nezkoušel, ale dočetl jsem se o ní v článku na A List Apart, kde se o dělení slov na webu a jeho uskálích můžete dočíst víc. Ten článek můžu jen doporučit.

Ferda Mravenec

reaguji na tuto vetu primo z perexu clanku :

V článku si ukážeme, jak zajistit, že bude písmo použito stejně spolehlivě jako například obrázek ve formátu PNG.

a chci se autora zeptat, zdali mel na mysli to „spolehlive“ zobrazovani PNG treba prave v Internet Exploreru, jehoz logo pro clanek pouzil ??? :) treba to, ze to neumi poradne pruhlednost … Takze jestli takto „spolehlive“ budou chodit i ty fonty, tak to potes … :)

Nox

Osobně se těším na WebP, jen nevím jestli bude mít průhlednost, možná ne. Sice se také jedná o ztrátovou kompresi, ale – přes mnohem lepší kompresní poměr – vypadá také mnohem kvalitněji.

Josef Richter

Průhlednost PNG neumí snad jen IE6 a ten už je naštěstí mrtvej.

Dlouhán

Tak si zkuste v IE7/8 průsvitný PNG a jakýkoliv IE filter. Pokud tvrdíte, že taková kombinace je nesmysl, tak v nejmíň 99% případů máte pravdu, potřebný obrázek udělám v grafickém programu.
Ale pokud budete chtít třebas JS stmívačku, potřebujete měnit průsvitnost (opacity) a pro IE7/8 je kombinace částečné průhlednosti a filtru problém.

Michal Kára

Tak jsem se kouknul na ten FontSquirrel. No pěkný. Zrovna bych potřeboval pro web jeden font. Vybral jsem si asi dvacet kandidátů, říkám si super. Jenže, ani jeden z nich neměl české znaky. Takže – ta-da-da-dam. Pro nás ne moc použitelné :-/

T3RMiX

Zkuste si dát možnost expert a Custom Subsetting kde zvolíte češtinu. Trápil jsem se s tímhle problémem asi 2 hodiny než jsem ho vyřešil – funkční ve všech majoritních prohlížečích.

Michal Kára

To jsem taky zkoušel. Drtivá většina Czech subset vůbec neměla, jeden ano, ale stejně české znaky neměl.

jlx

Jako poměrně dobrý zdroj fontů mi připadá http://www.fontspring.com/. Jejich fonty se zdají být kvalitní (i když ne zadarmo) a lze jednoduše vybrat pouze ty, které mají podporu českých znaků..

Navíc jejich licence je také poměrně benevolentní (narozdíl od ostatních prodejců či výrobců). Zkoušel jsem porovnávat webové písmo vygenerované FontSquirrelem s tím, které poskytuje FontSpring a zdálo se mi, že FontSquirrel má občas docela problémy s hintováním. Tím pádem byla písma v menších velikostech dost nepoužitelná..

Michal Kára

Jo, ten FontSpring vypada dobre, diky.

Luboš

Zrovna na jednom projektu používám @font-face, líbil se mě poslední zápis, ale bohužel nefunguje jak bylo popsáno.
Příklad:

@font-face {
  font-family: DINWebBold;
  src: url("../fonts/DIN­Web-Bold.woff") format('woff');
  src: url("../fonts/DIN­Web-Bold.eot");
  font-weight: bold;
  font-style: normal;
}

Ve firefoxu se nenačte správný písmo. Tudíž tvrzení, že moderní prohlížeče načtou první src a další ignorujou je nepravdivé (tedy v jednom zápisu @font-face)

Enum a statická analýza kódu

Mám jednu univerzální radu pro začínající programátorty. V učení sice neexistují rychlé zkratky, ovšem tuhle radu můžete snadno začít používat a zrychlit tak tempo učení. Tou tajemnou ingrediencí je statická analýza kódu. Ukážeme si to na příkladu enum.