Dynamická písma – přiložení fontu k webové stránce

Při návrhu webové stránky není vhodné definovat zvláštní neobvyklá písma, protože na počítači čtenáře pravděpodobně nebudou nainstalovaná. Je tedy třeba omezit se na tradiční písma. Firma Microsoft ovšem navrhla metodu stahování písem v souborech typu *.eot, kterou obsahují již prohlížeče MSIE 4+.

Způsob uložení písem do binárního souboru se nazývá „embed fonts“. Soubory *.eot však mají zvláštní formát, není možné například vyjmout ze složky C:\Windows\fonts nějaký soubor *.ttf a přejmenovat ho. K vytvoření souboru dodává Microsoft speciální program WEFT.

Soubory dynamických písem obsahují ochranu, je v nich například uvedeno, pro kterou doménu je povoleno je použít. Pokud byste si například odněkud stáhli soubor písma, prohlížeč by ho odmítl použít. Je proto nutné pro každou doménu, kde chceme taková písma použít, vygenerovat specifický soubor *.eot. Soubor dynamického písma nemusí obsahovat všechny znaky, lze zvolit pouze ty potřebné. Výsledný soubor tedy nemusí mít 15 až 20 kB, ale třeba jen 3 kB. Vygenerovat soubor písma lze pouze z fontu, který máme instalován ve svém počítači. Program WEFT však neumožňuje editaci tvarů písma a také ne všechna písma lze převést, jak uvidíme dále.

Práce s programem WEFT

Po prvním spuštění si program nejprve zanalyzuje fonty instalované v počítači a vytvoří si jakousi vlastní databázi fontů. Teprve potom zobrazí okno průvodce vytvořením souboru dynamického písma. Vytvoření souboru sestává z následujících kroků:

1. analýza webové stránky
2. výběr fontů a znaků pro soubor dynamického písma
3. zadání adres (domén), pro které je písmo platné
4. vytvoření souboru dynamického písma

Program WEFT obsahuje průvodce, který nás může těmito kroky provést. Obsahuje i jistá „vylepšení“, takže při spuštění průvodce je kroků ve skutečnosti více, některé však lze přeskočit. Program totiž umí i připravit písma pro celý web a rovnou je vyexportovat. Jednak je to tak trochu „duchařina“, protože nevíme přesně, co program dělá (různě prohledává stránky na webu), a jednak si myslím, že je lepší si připravit soubor písem na zkušební stránce. Tím si usnadníme kontrolu činnosti programu a také analýza stránky a výběr fontu proběhne rychleji.

Než začnete s prací:

• ujistěte se, že máte korektně nainstalovaný použitý font;
• stáhněte si a nainstalujte program Microsoft WEFT;
• vytvořte zkušební stránku – jednoduchý HTML dokument, ve kterém použijte všechny požadované znaky. Nastavte požadované vlastnosti fontů ve stránce, lhostejno, zda použijete definici pomocí stylu, nebo pomocí elementu font;
• připravte si seznam adres (domén), pro které má být vytvářený soubor dynamických písem platný.

Postup při vytváření souboru písma

Předpokládám postup, kdy nepoužijete průvodce. Pokud použijete průvodce, některé kroky udělá automaticky, na druhou stranu bude zase chtít provést některé kroky, které jsou zbytečné.

1. View | Available fonts
   WEFT zanalyzuje nainstalovaná písma a zobrazí jejich seznam. Písmo, které má u sebe červenou ikonku, nelze převést do dynamického fontu. Žlutě označená písma obyčejně převést lze, ale jde převážně o systémová písma, která není třeba převádět. Žlutá ikonka označuje, že WEFT není schopen rozhodnout, zda půjde písmo převést. Zelená ikonka znamená, že písmo je možné převádět dle potřeby.
2. Tools | Add Web Pages
   Pomocí tlačítka výběru, nebo zvolením file:// a zadáním cesty k souboru na disku, přidejte cestu k vaší zkušební stránce.
3. Tools | Analyze Web Pages
   Provede analýzu naší zkušební stránky. Vyhledává fonty a použité znaky, proto je ideální ve zkušební stránce použít pouze vybraný font a jemu příslušné znaky. V příkladech na stránkách Microsoftu jsou mimo jiné také stránky, kde jsou pomocí fontů zadávány láhve, graffity a jiné „šílenosti“.
   
4. Tools | Fonts to Embed
   Zobrazí fonty nalezené ve stránce a jejich vlastnosti.
   
   Tlačítkem Don’t embed se dají nepotřebné fonty vypnout, nebudou se přidávat do souboru dynamického písma. Rozhodně nemá smysl převádět Times New Roman, protože jde o systémové písmo dostupné prakticky všude. V tomto dialogu je dobré si povšimnout nastavení jazyka – pro česká písma se nastavuje automaticky Latin Extended-B, což většinou vyhovuje, pokud zrovna nepracujeme s písmem čarového kódu.
5. Tlačítko Subset
   Spustí se Subset Editor, v němž můžeme ovlivnit, které znaky se budou exportovat do souboru dynamického písma. Černě jsou zobrazeny znaky, které budou do dynamického fontu zahrnuty, šedě se vykreslují znaky, které tam nebudou (protože ve zkušební stránce nejsou a tak by jen zabíraly místo). Kliknutím se dá konkrétní znak vypínat a zapínat. V editačním řádku se ukazuje výběr písma, znaky je možné přidávat i sem. Je možné také vybrat jazykové varianty znaků. Může se stát, že se budou ukazovat čtverečky místo znaků – zkuste v dialogu Fonts to embed změnit nastavení Language. Čtverečky se budou ukazovat vždy, pokud pracujete s needitovatelným fontem (červená ikonka). Problém se může objevit i na neanglické verzi Windows. V tomto případě zkuste pracovat dále a čtverečky „nezkoumat“, obyčejně se soubor písma vygeneruje správně.
6. Tools | Create Font Objects
   
   Enter the location… – určení místa, kam soubor písem uložit. Vyberte file:// a zadejte cestu na vašem disku. Program sice umí ukládat soubory i přímo na webový server, ovšem jakýmsi Microsoftím způsobem, což ne vždy vyhovuje webserveru.
   Fonts may only be used… – zde se nastavuje, pro které domény (adresy) bude soubor písma platný. Zadejte sem jak kořenovou složku vašeho webu, tak i cestu k místnímu disku nebo serveru, kde stránky testujete. Chcete-li použít soubor na více doménách, přidejte je sem. Jednotlivé záznamy přidáte stiskem tlačítka Edit.
   Tlačítkem Dokončit se na zadaném místě vytvoří soubor *.eot, pokud s zatrhne volba Show CSS @font-family declarations, zobrazí program kód, který je třeba přidat do definice stylu stránky.

Použití souboru *.eot ve stránce

Soubor *.eot, který jsme vytvořili v předchozích krocích, přemístíme do požadované složky webové prezentace. Jméno souboru je možné libovolně změnit, jen je třeba dodržet příponu. Do externího souboru stylů nebo do části, kde definujeme styl stránky, přidáme odkaz na soubor takto:

První definice je povinná syntaxe zpřístupňující znaky, které budou dále dostupné jako písmo s názvem Font1. Toto jméno je volitelné, může být dokonce stejné, jako existující font, pak se v případě existence toho písma na systému uživatele použije písmo, které má uživatel v systému, namísto stažení fontu v souboru myfont1.eot.

Druhá definice již popisuje třídu použitelnou v dokumentu, vidět je i definice alternativních písem Arial, Tahoma (ta se použije na systémech, které stahování fontu nepodporují)

Ve stránce pak formátujeme třeba celý blok pomocí našeho písma:

Zdůrazňuji, že uvedený postup vložení dynamického písma funguje pouze v Internet Exploreru. Některé další prohlížeče sice také mohou načítat písma, ovšem princip je odlišný. S využitím této metody lze ušetřit spoustu grafiky a přesto vytvořit pěkně vypadající nadpisy nebo záhlaví tabulek, vždy je však potřeba počítat s návrhem alternativních písem pro zobrazení v jiných prohlížečích.

Příklady stránek s použitím dynamického písma pro zvláštní efekty naleznete na konci stránky http://www.microsoft.com/typography/web/embedding.

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

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