Jak používat písma na webu

„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.

Zajímám se o programování na platformě .NET, webdesign, webové prohlížeče, sémantický web a ontologie. Působím jako Microsoft Student Partner. Své technické články vydávám na blogu Dajbych.net.

Věděli jste, že nám můžete zasílat zprávičky? (Jen pro přihlášené.)

Komentáře: 18

Přehled komentářů

Rdm tak už je to tady..
Martin Malý Re: tak už je to tady..
Makovec Re: tak už je to tady..
blizzboz Re: tak už je to tady..
Marek RE: dělení slov
Tesarik Re: RE: dělení slov
dasim Re: RE: dělení slov
Ferda Mravenec "Spolehlivy PNG"
vasek7 Re: "Spolehlivy PNG"
Nox Re: "Spolehlivy PNG"
Josef Richter Re: "Spolehlivy PNG"
Dlouhán Re: "Spolehlivy PNG"
Michal Kára FontSquirrel
T3RMiX Re: FontSquirrel
Michal Kára Re: FontSquirrel
jlx Re: FontSquirrel
Michal Kára Re: FontSquirrel
Luboš Poslední definice nefunguje
Zdroj: https://www.zdrojak.cz/?p=3360