Chaos Sanctuary

Standardní fonty se nahrazují především v hlavičkách a krátkých textech. Žádná z dále uvedených metod – sIFR, facelift (flir), typeface.js a font-face/CSS - není vhodná pro delší text. Všechny tyto metody jsou relativně nové a stále se vyvíjejí.

sIFR3

SIFR je náhrada textu fonty převedenými do flashového souboru, značně rozšířený, nyní ve verzi 3, která je docela přítulná. Už dříve jsem přeložila návod na sIFR3 ale tehdy nebyly nástroje pro vytvoření .swf souboru z fontů, když jste neměli Flash. Teď existuje sifr font maker, který je free. Nainstalujte, vyberte font a uložte jako název_fontu.swf. Fontmaker, který je tam aktuálně ke stažení (verze z 19.září), funguje pouze se starší verzí siFR-r419 - tu si stáhněte zde. V souboru sifr.js je kontrola na verzi sIFR a verzi .swf souboru (ale když si stáhnete poslední verzi sifr a hned na začátku skriptu sifr.js tam nacpete 419, tak to taky funguje, ale za nic neručím – viz pokus)

Facelift (flir)

Facelift je náhrada fontů obrázkem, který se generuje pomocí php a gd knihovny. Pro nějaké pokročilejší funkce to chce i imagemagick. Zhruba to funguje tak, že si stáhnete ten Facelift, podle potřeby upravíte config-flir, do adresáře fonts šoupnete .ttf soubory fontů, kterými chcete nahrazovat, a do každé stránky, kde to chcete používat, přidáte kus kódu, který je tam uvedený v sekci quick start. Můžete to případně kombinovat s js knihovnami jquery, prototype, apod. Standardně to nahrazuje h1-h5 ale dá se to nastavit. Výsledek je opravdu obrázek, nedá se to označit jako text. Nezkoušela jsem ale pěkný návod je tady.

Typeface.js

Typeface.js je javascriptové řešení. Potřebujete na web stáhnout knihovnu typeface.js, do stránek přidat odkaz na ni a do html potřebné třídy. Fonty musí být uloženy v souboru název-fontu-typeface.js, který si vygenerujete ze svého .ttf souboru v sekci fonts. Využívá to canvas a VML (v IE). V prohlížečích, které používají pro kreslení canvas, je prý text možné vybrat ale není to bohužel vidět, prý se na tom pracuje.

Font-face v CSS

Článek o font-face tvrdí, že font-face lze pro náhradu fontů využít už teď: pro Safari (webkit) a Mozillu 3.1 beta si na web nahrajete fonty ve formátu .otf. Pro IE musíte použít font ve formátu .eot, což je microsoftí řešení a dělá se to pomocí prográmku weft3, který ale pro změnu potřebuje zdrojové fonty v .ttf. V článku jsou uvedeny příklady deklarací pro safari i IE.

Formát .eot by už neměl být proprietární, protože byl předán do W3C, a měl by se stát standardem, ale Mozilla ho stejně nechce a je podle nich potřeba nějak kontrolovat práva k fontům, a Safari na to kašle a nechá každého používat fonty bez kontroly. Celé se to kouše na tom, jak zajistit, aby se nedaly používat „kradené“ fonty. Chcete-li vědět, které fonty embedding umožňují (a je jich fakt málo), koukněte sem

Jiné metody

Starší, vyzkoušené, metody jsou sIFR2 nebo nahrazování pomocí js a php - dynamické nahrazování textu.

Kdybych si měla teď vybrat, asi bych použila siFR3, protože je jednodušší než siFR2, případně typeface.js tam, kde by mi nevadilo, že text nejde vybrat. Asi nejčistší řešení by bylo to poslední ale než (a jestli vůbec) se dospěje k jednotnému postupu mezi prohlížeči, to si ještě počkáme. Já tam teď vidím problém i v tom, že pro Mozillu bych musela mít .otf a pro vytvoření .eot zas .ttf font. Takže by to asi chtělo nějaký převodník mezi otf a ttf. Z free nástrojů jsem našla jen fontforge ale nezkoušela jsem ještě. Pokud byste měli zájem o detailní překlad nějakého návodu, řekněte si v komentářích.

A co používáte pro nahrazování fontů vy, pokud vůbec?

Update: (březen 2009) Další nástroj, podobný jako typeface.js je Cufón. Český návod pro nahrazování písma pomocí cufón je tady