Možnosti

CSS - Asi najčastejšie používaná technika ako docieliť aby nadpisy boli v inom fonte, než v jednom z tých všadeprítomných. Pri použití čistého CSS sa tiež skýta možností niekolko. Iné riešenie je pre elementy ktoré chceme aby floatovali (horizontálne menu), a trošku iné pre nadpisy. Niekdo používa vnorené SPANy ktoré potom pozicuje absolútne mimo obrazovku, niekdo text-indent: -500em. Všetky techniky však trpia manuálnou prípravou obrázkových nadpisov.

Flash - sIFR možno poznáte, možno nie. Ide o techniku nahrádzovania nadpisov za Flash. Do predu si pripravíte vo Flash IDE súbor (podla šablóny) s jedným textovým polom do ktorého sa pri exporte pri balia všetky alebo vami vybrané znaky zo zvoleného fontu. Javascript na stránky potom zaistí nahradzovanie nadpisov za Flashe. Funguje dokonca CSS pre velkosť, farbu a dekoráciu písma. Luxus.

Cufon

Nový hráč na tomto poli si dal za úlohu používanie otvorených formátov. Nadpisy nahrádza za HTML5 canvas element pre lepšie browsre, a VML pre tie menej dobré. Na zhotovenie súboru s písmom nepotrebujete mať kúpené žiadne Flash IDE, žiadny Photoshop.

Ako to funguje

Na začiatok si potrebujete pripraviť súbor s písmom. Budete teda potrebovať TrueType (ttf) alebo OpenType (otf) súbor s písmom ktoré chcete (alebo grafik chcel) požiť. Tu si treba dať pozor na licenčné podmienky písma. Väčšina dodávateľov totiž v licencii zakazuje akékoľvek jeho zprístupnenie verejnosti, čo umiestnenie na web rozhodne je. Aj keď sa písmo v tomto procese preformátuje a je prakticky nepoužiteľné, stále je ho možné (ak ste dosť šikovný) preložiť späť do TTF/OTF. Doporučujem pozrieť sa sem pre volné alternatívy - dafont.com.

Písmo sa preloží do formátu SVG, potom do VML, a nakoniec do JSON s kusom funkčného kódu. Samozrejme toto všetko nebudete robiť ručne ale poslúži vám generátor. Môžete použiť ten hostovaný alebo si rozbehnuť vlastný, je open source. Získate tým teda javascript s fontom. Generátor vám umožňuje vygenerovať aj bold a italic varianty písma. Môžete si v ňom toež zvoliť ktoré znaky potrebujete.

Druhou časťou je javascript, ktorý zabezpečí vymieňanie a vykreslovanie nadpisov. Jeho komprimovaná velkosť je 13 kb. Oba javascripty vložíme do nášho HTML <script> tagom. Ďalej musím cufonovi povedať ktoré elementy má nahradiť. To znamená ďalši <script> tag, alebo do iného (z hlavičky) zalinkovaného javascriptu.

<script type="text/javascript">
Cufon.replace('h1');
</script>

Takto dáme cufonovi vedieť že chceme nahradiť všetky H1 elementy za grafické nadpisy. Je možné použiť aj rôzne fonty pre rôzne elementy ale o tom už sa dočítate v dokumentácii. V základnej konfigurácii môžete používať len mená tagov, cufon totiž nemá žiadny CSS selector engine. Ale! Je dosť chytrý na to aby detekoval či používate jednu z populárnych js knižníc (jQuery, MooTools alebo Prototype), a ak áno, môžete funkcii Cufon.replace podstrčiť namiesto názvu tagu, CSS selector. Čo to pre vás znamená asi viete.

Kompatibilita

Na začiatok: IE 6+ , FF 1.5+ , Safari 3+, Opera 9.5+, Chrome

Cufon používá inú stratégiu pre Webkit/Gecko a inú pre IE. Webkit/Gecko podporujú HTML5 canvas element, ale nepodporujú VML, a IE presne naopak. Písal som že font je zkonverovaný do VML, to znamená že v IE sa nadpisy vykreslujú rýchlejšie a dokonca je možné vykreslený text označiť a zkopírovať do schránky. Pre canvas browsre sa krivky obsiahnuté v súbore s písmom prekladajú do kresliaceho kódu, ktorý kreslí písmenká na canvas.

IE má ešte dorný bug, kvôli ktorému sa nadpisy vykreslia s menším oneskorením. Môžete ho obísť vložením následujúceho pred uzatvárací tag </body> :

<script type="text/javascript"> Cufon.now(); </script>

Known bugs:

• v IE je treba dať floatovaným elementom layout
• :hover nefunguje

Ak by ste sa rozhodli dať cufonovi vo svojom projekte šancu, nezabudnite napísať do komentáru ako to dopadlo a či vôbec. Happy cufoning cufóni.

Zdroj: http://wiki.github.com/sorccu/cufon