Stahovatelné fonty podruhé

V předchozím článku jsme si teoreticky popsali CSS2 @pravidlo @font-face a některé důležité deskriptory k popisu vkládaných fontů. Tentokrát si ukážeme, jak vytvářet soubory s fonty typu Embedded Opentype pomocí nástroje WEFT firmy Microsoft a konečně předvedeme použití @font-face v praxi.

Embedded OpenType

Jak jsme si již řekli, Internet Explorer podporuje soubory s fonty typu *.eot. Jde o formát vytvořený firmami Microsoft a Adobe pro přenos fontů společně s dokumentem. Hlavní uplatnění prozatím nalezl v aplikacích Office firmy Microsoft, méně známé je jeho použití na webu. Jde o formát, který je vždy vázán na doménu, nemůžete tedy vzít libovolný soubor a začít jej používat na svých stránkách, ale musíte jej pro ně pokaždé znovu vygenerovat. Zajímavou vlastností je, že lze zajistit, aby výsledný soubor obsahoval pouze ty znaky, které jsou v cílovém dokumentu, a tak zmenšit jeho velikost.

WEFT

WEFT je volně dostupný nástroj firmy Microsoft pro vytváření *.eot souborů. V tomto článku používám verzi programu 3.2, která je zdarma k dispozici na oficiální stránce WEFTu.

Základy práce s WEFTem

Program WEFT dokáže přetransformovat font již nainstalovaný v systému do *.eot souboru. Nejdříve proto musíte nainstalovat font do systému (přes | Nastavení | Ovládací panely | Písma | nebo analogicky). Poté přiřadíte ve svých XHTML stránkách (můžete i v externím stylu) nainstalovaný font příslušným elementům. Stránky se budou zobrazovat správným fontem, ale pouze na vašem systému. Proto je nutno daný font vyexportovat do externího souboru a doplnit do stylového předpisu definici @font-face.

Po spuštění programu WEFT (respektive při zvolení | File | New | z menu) na vás čeká první okno wizardu (Add Web Pages) pro tvorbu fontů:

V tomto okně je nutné zadat cestu ke stránce, pro kterou chcete vytvořit soubory s fonty. WEFT totiž prohledá zadanou stránku a najde všechny používané fonty. Uživatel si potom může vybrat, které z nich chce konvertovat do .eot.

Máte tedy zadanou stránku, pro kterou vytváříte fonty. Ještě můžete zatrhnout možnost Do not add linked pages. Pokud tuto možnost nezvolíte, WEFT bude analyzovat i všechny odkazované dokumenty. Je pouze na vás, zda chcete najednou vytvořit fonty pro celý web, nebo pouze pro konkrétní stránku.

V dalším okně wizardu je nutno potvrdit analýzu stránky. Lze také analýzu vypnout a vybrat fonty manuálně. Dále v tomto článku ale předpokládám, že analýza zůstala zapnuta. Následující okno wizardu (Fonts To Embed) je stěžejní pro celou operaci. WEFT již zanalyzoval zvolené dokumenty a našel všechny používané fonty:

V prostřední části okna vidíte seznam všech nalezených fontů. Ikona vlevo od jejich názvů signalizuje, zda je lze extrahovat do formátu Embedded OpenType. Jak asi tušíte, u zeleného fontu je to možné a u červeného nikoliv. Žlutá ikonka znamená, že výsledek je nejistý.

Nyní je nutné vybrat, které z nalezených fontů chcete extrahovat. To se provádí tlačítkem Embed/Don’t embed. V tomto případě byly nalezeny tři fonty, Times New Roman, Tom Violence a Neural (BRK). Extrahovat Times New Roman je samozřejmě naprostá zbytečnost, protože se nachází v podstatě na každém systému. Font Tom Violence převést nejde, takže zbývá „exotický“ font Neural (BRK).

Jak již bylo na začátku řečeno, soubory typu Embedded OpenType mohou obsahovat třeba jen podmnožinu znaků z původního fontu. K tomu slouží roletové menu Subsetting, ze kterého si můžete vybrat správnou podmnožinu. Volba Per page subsetting způsobí, že pro každou analyzovanou stránku bude vygenerován zvlášť soubor pouze s těmi znaky, které jsou zrovna potřeba. Vznikne tedy tolik souborů, kolik stránek WEFT analyzoval. Per site subsetting vytvoří jediný soubor se všemi znaky, které byly nalezeny na analyzovaných stránkách. Standardní třetí volba Family based subsetting vytvoří podobně jako předchozí možnost jeden soubor se všemi nalezenými znaky, navíc ale bude obsahovat tyto znaky ve všech variantách (kurzíva, tlusté písmo). Volba Union subsetting znamená, že všechny nalezené znaky budou vloženy do všech souborů s fonty. To může být užitečné například tehdy, když používáte dynamickou změnu písma, třeba pomocí :hover pseudo-třídy. Raw subsetting funguje stejně jako předchozí možnost, ale do souborů navíc přidá i znaky, které se při prezentaci přímo neobjeví, například znaky ze skriptu nebo z elementů. Předposlední varianta Language subsetting vybere znaky užívané ve zvoleném jazyce. A konečně pomocí No subsetting můžete omezení počtu znaků zakázat úplně, případně můžete použít tlačítko Subset… a znaky vybrat manuálně.

Je samozřejmě otázkou, jakou podmnožinu znaků vybrat, respektive zda nezařadit do výsledného souboru všechny znaky. Pokud vyberete pouze ty znaky, které jsou nezbytně nutné, získáte malý a kompaktní soubor, ale při aktualizaci stránky jej budete muset znovu vygenerovat. V opačném případě nebudete mít při aktualizaci žádné problémy, ale soubor s fontem bude mít větší velikost. Nejlepší bude vždy vyzkoušet, jak je výsledný soubor velký, a podle toho vybrat vhodnou podmnožinu.

V tomto okně (Create Font Objects) si musíte vybrat, kam budou výsledné soubory vygenerovány (volba Enter the location…), ale hlavně domény, ve kterých budou fonty použitelné. Zajímavá je volba Show CSS @font-family declarations, díky které se vám zobrazí okno s kompletní CSS2 deklarací fontu, kterou pak stačí překopírovat do vašeho stylového předpisu:

Nyní by měl být váš boj s WEFTem zdárně u konce. Vygenerované soubory by se měly nacházet na zvoleném místě a po ruce byste měli mít i příslušné @font-face @pravidlo. (Jak jste si asi všimli, WEFT do definice fontu přidává i deskriptory font-style a font-weight, ačkoli není zřejmé, zda jsou mu vůbec k něčemu dobré.)

@font-face v praxi

Na závěr malá praktická ukázka. Dejme tomu, že jste si vygenerovali soubor z fontu Neural (BRK). Na začátek stylového předpisu umístíte @pravidlo @font-face, se kterým vám pomohl WEFT, font nazvete jednoduše neural a přiřadíte jej třeba nadpisům první úrovně:

@font-face {
  font-family: neural;
  font-style: normal;
  font-weight: normal;
  src: url(„NEURALB0.eot“);
}
h1 {font-family: neural, cursive;}

Uvedený příklad si můžete vyzkoušet. Při použití Internet Exploreru by se měl nadpis první úrovně zobrazit „zvláštním“ fontem Neural (BRK), ostatní prohlížeče si díky generickému fontu cursive samy zvolí správné alternativní písmo.

Doufám, že vám tento článek alespoň trochu pomohl osvětlit problematiku stahovatelných fontů, a to jak z teoretického, tak i praktického hlediska. Závěrem mohu pouze znovu zdůraznit, že ani sebelepší font nenahradí kvalitní obsah. Energii, kterou byste chtěli věnovat prohledávání internetu za účelem nalezení nezvyklých fontů, raději věnujte vypilování obsahu vašeho webu. Uživatelé to určitě ocení mnohem více.

Pozn. red.: Tento článek byl na Interval.cz přijat v podstatě díky chybě při sestavování redakčního plánu. Jeho obsah je prakticky duplicitní se starším článkem Dynamická písma – přiložení fontu k webové stránce Pavla Růžičky. Nicméně se vám skýtá možnost pohlédnout na problém okem dvou různých autorů a porovnat nejen jejich individuální přístup, ale i vývoj, k němuž v této oblasti došlo od zveřejnění prvního článku.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.