Nemožnost používání libovolných písem, která jsou dostupná pro DTP, je „odvěkým“ omezením webových stránek. Potřeba ozvláštnit stránku neobvyklým písmem se nejčastěji týká nadpisů. Použít místo skutečného nadpisu (h1, h2, …) obrázek s nadpisem je sice možné, ale zcela neprofesionální, protože zvláště nadpisy jsou důležité pro SEO.

Jaké máme tedy možnosti?

  1. Obrázkový nadpis, který je pomocí CSS pozicován tak, aby vizuálně překrýval nadpis h1, h2 atp.
  2. @font-face – CSS deklarace umožňující plnohodnotně použít libovolný font (písmo je umístěno na serveru, nikoliv v počítači návštěvníka webu)
  3. Cufón – písmo převedeno do JS a zobrazeno pomocí JS knihovny Cufon
  4. sIFR – JS + SWF řešení; písmo převedeno do SWF, JS parsování DOMu a nahrazení elementů s „hezkým písmem“
  5. Jsou tu další možnosti a postupy se shodným principem jako Cufon (např. typeface.js) nebo dynamické generování obrázkových nadpisů na serveru (FLIR).

Obrázkový nadpis

Protože se jedná o starý postup, který však lze technicky realizovat několika způsoby, doporučuji pěkný shrnující článek Nine Techniques for CSS Image Replacement. Podobné shrnutí najdete také na mezzoblue.

@font-face

Nápad umístit soubor s písmem na server a tím zajistit jeho dostupnost pro každého návštěvníka webu není žádnou novinkou. Problém však je v podpoře tohoto postupu v různých prohlížečích. Překvapivě největším problémem je Firefox, který @font-face podporuje až od verze 3.5. Druhým „potížistou“ je pak IE, které vyžaduje font ve formátu EOT, nikoliv obvyklý TTF či OTF. Prohlížeč Chrome @font-face podporuje, ale ve verzi 3 je třeba podporu zapnout spuštěním Chrome s parametry: chrome.exe  –enable-remote-fonts. Ve verzi 4 bude prý již standardně podpora @font-face povolena.

Pro použití vlastního fontu použije zápis podobným tomuto:

@font-face {
font-family: 'Champagne&LimousinesThick';
src: url('Champagne_Limousines-Thick.eot');
src: local('Champagne & Limousines Thick Regular'), local('Champagne&LimousinesThick'), url('Champagne_Limousines-Thick.ttf') format('truetype'), url('Champagne_Limousines-Thick.svg#Champagne&LimousinesThick') format('svg');
}
h2{
font-family: "Champagne&LimousinesThick", Arial, Helvetica, sans-serif;
font-size: 25px;
}

Pro vytvoření EOT a TTF i vygenerování CSS doporučuji použít @font-face Kit Generator na Font Squirrel. Vygenerované fonty mohou obsahovat pouze část znakové sady podle vaší volby („Subsetting“) a soubory tak mohou být výrazně menší. Pro kompletní sadu znaků v češtině je třeba v „Subset to Unicode Tables“ zvolit „Basic Latin“, „Latin-1 Sup“ a „Latin Extended A“. Pokud víte, že písmo použijete pro několik málo nadpisů, které se nebudou měnit, velikost souboru můžete výrazně snížit explicitním vyjmenováním znaků, které chcete používat (volba „Single Characters“).

Cufón

Cufón je postup pro nahrazení textu psaného běžným písmem za text psaný libovolným písmem. Požadované písmo (TTF, OTF, PFB) nejdříve zkonvertujete do JS, do hlavičky dokumentu přidáte JS písmo a JS knihovnu Cufon a řeknete, že například h2 nadpis má být zobrazen vaším písmem.

Velikost vygenerovaného JS souboru s fontem bude záviset na počtu znaků, které bude obsahovat (platí totéž co jsem psal u @font-face kit generátoru).

Základní použití je přehledně popsáno na Usage – cufon (použití více fontů, použití v IE aj.).

Pokud pro první seznámení dáváte přednost videu, tu je screencast.

Na co si dát pozor:

  • Pokud se vám výsledné písmo nezobrazuje kvalitně, zkuste při generován změnit hodnotu „Scale the font to the following size“, tak aby velikost odpovídala velikost písma v pixelech, kterou chcete použít.
  • V dokumentaci Cufónu je uvedeno, že pro správné fungování je třeba, aby stránka byla v UTF-8, nicméně vyzkoušel jsem, že ani s windows-1250 není problém.
  • Hover efekt není z výkonnostních důvodů implicitně povolen. Aby vám fungovaly :hover selectory, musíte použít zápis jako např. Cufon.replace(‚h1‘, { hover: true }). Více viz Styling – cufon (dole).
  • Jako selektory v metodě Cufon.replace(), můžete použít názvy HTML tagů. Pokud však používáte spolu s Cufonem frameworky jako jQuery, MooTools, Dojo či Prototype JS, můžete použít jejich selektory. Tzn. při použití jQuery například Cufon.replace(‚.sidebar h2 span‘)
  • Text zobrazený Cufonem nelze myší označit, což je nepraktické, ale u nadpisů snesitelné.
  • Problém je při použití Cufónu s jQuery FancyBoxem.

sIFR

sIFR (sIFR 2 a sIFR 3) je metoda kombinující Flash a Javascript. Písmo je uloženo jako SWF, javascript je použit pro vlastní nahrazení vybraných HTML elementů (obvykle nadpisů) za sIFR verzi. Text může být narozdíl od Cufonu označen myší. Postup implementace krok za krokem najdete v článku How To Implement sIFR3 Into Your Website nebo se můžete kouknout na sIFR „naživo“ na ukázkové stránce.

Osobně za hlavní nevýhodu sIFR považuji nutnost úpravy FLA souboru, tedy nutnost použít některý flash editor. Na druhou stranu nespornou výhodou je, že font je obsažený ve SWF není tak porušena EULA licence fontu (viz dále).

Pozor na licence fontů

Použitím postupu @font-face nebo Cufón šíříte font na webu, můžete tak porušit EULA. Ve výběru fontu jste tedy omezeni na písma, která povolují tento způsob použití. Velký výběr takových písem najdete na Font Squirrel, písma s českou diakritikou pak na České fonty.

Srovnání postupů

  @font-face Cufon sIFR
Porušuje EULA některých fontů ano ano ne
Text lze označit myší ano ne ano
Podporuje :hover CSS ano ano ano
Vyžaduje Javacript ne ano ano
Vyžaduje Flash ne ne ano

Související