Cufón nebo Typeface.js — který vybrat?

Než budeme moci v prohlížečích začít široce používat @font-face, Typekit a další písně typografické budoucnosti, musíme se rozhodnout mezi třemi hlavními technologiemi sloužícími k nahrazení písma přímo v prohlížeči. sIFR, Cufón a nebo Typeface.js.

sIFR díky komplikovanému nastavování a velmi špatné rychlosti při načítání stránky postupně nahrazujeme jeho současnějšími sourozenci. Oba používají k náhradě canvas, respektive VML v Internet Explorerech a vypadají velmi podobně.

Který z nich zvolit? Na základě dostupných informací se rozhoduje jen těžce. Rozhodl jsem se pro vlastní hloubkový průzkum.

sIFR ratios: proti “poskakování” obsahu stránky

Stránka při načítání flashových souborů sIFRu může “poskakovat”. Je to nepříjemné, zejména v případě kdy obsahuje sIFR nadpisů více.

Můžeme tomu pomoci co nejpodobnější specifikací velikosti písma pro HTML verzi a pro sIFR verzi. Lepších výsledků pak dosáhneme použitím sIFR ratios - převodníků mezi velikostí HTML a sIFR verze textu.

sIFR v debugovacím módu vypočte ratios sám, návod je na sIFR wiki.

Použití je pak v sifr-config.js například takové:

sIFR.replace(nazev_fontu, {
  selector: '#content h1',
  ratios: [7, 1.58, 8, 1.48, 10, 1.5, 14, 1.45, 17, 1.43, 20, 1.41, 23, 1.4, 29, 1.39, 38, 1.38, 40, 1.37, 43, 1.38, 58, 1.37, 66, 1.36, 67, 1.37, 95, 1.36, 96, 1.35, 98, 1.36, 99, 1.35, 103, 1.36, 104, 1.35, 105, 1.36, 107, 1.35, 108, 1.36, 110, 1.35, 111, 1.36, 1.35], 
  css: [
    '.sIFR-root {background-color: #ffffff; color: #333333; }',
  ],
});

Proč je Cufón brufen milovníků webové typografie?

Protože šetří jejich čas a nervy.

Obrázek: Test zobrazování freewaroveho písma Lido v prohlížeči
metodou Cufón. (Prohlédnout online).

K jeho implementaci stačí zkonvertovat font do javascriptového souboru, připojit do hlavičky HTML stránky spolu s hlavním javascriptovým souborem a přidat magickou formulku Cufon.replace.

Vzpomeňme na sIFR. Soubor s fontem jsme museli připravit ve Flashi, k HTML stránce přidat javascriptovou konfiguraci a zvláštní kaskádové styly pro sIFR. Pak přišel tzv. font tuning, kdy jsme se pomocí magie snažili sIFR přimět, aby písmo zobrazoval tak jak chceme my, nikoliv jak chce on.

Cufón [custom fonts] určitě není dokonalý (zatím neumožňuje kopírovat obsah, :hover efekty atd.), je ale každopádně důležitým mezníkem. Tím příštím bude široká podpora @font-face.

Řešení pro sIFR 3: když ve Firefoxu mizí kurzor “pracka” po vyrolování textu mimo obrazovku

Je to chyba, na kterou máme jen workaround. U volání sIFRu je potřeba nastavit parametr fixFocus: true.

Příjemný den přejí pacienti oddělení “sIFR” psychiatrické léčebny v Bohnicích.

Barva odkazu textu zobrazovaného pomocí sIFRu

Jde to v sIFRu 3. Není ale snadné najít přesný návod, protože oficiální dokumentace mlčí.

Flash naštěstí podporuje CSS vlastnosti, které k tomu potřebujeme. Do konfirugačního javascriptu (sifr-config.js) musíme musíme dodat CSS pro náš selektor takto:

sIFR.replace(font_name, {
 selector: '#content h2',
 css: [
 '.sIFR-root {background-color: #ffffff; color: #322a21; }',
 'a { text-decoration: none; color: #B14289; }',
 'a:hover { text-decoration: none; color: #B14289; }'
 ]
});