18 Březen

Cufón a použití vlastních fontů na stránce

Cufón slouží k použití vlastního fontu na webových stránkách, je to Javascriptový nástroj a jeho správná funkčnost je tudíž podmíněna zapnutým Javascriptem.

Pro použití si musíme stáhnout ze stránek cufon.shoqolate.com soubor cufon-yui.js, který připojíme do dokumentu, tímto jsem splnili první část, druhá část je o vytvoření souboru se samotným fontem, který si vygenerujeme na výše uvedené stránce.
S vyplněním poliček asi nikdo nebude mít problém, ale i kdyby přesto, tak dejte vědět do komentářů nebo e-mail, rád poradím, asi jediný problém je s výběrem „glyphů“, já vybírám Basic Latin, Latin-1, Latin A a Latin B, stačí odzkoušet a otestovat, zda fungují všechny znaky a diakritika.
Po úspěšném stáhnutí souboru a nahrání do stránek, si oba soubory připojíme do dokumentu:



Tímto jsme dostali cufón do stránky, teď ho musíme ještě spustit na daných elementech.
Nejjedodušší zápis, pro nadpis H2, vypadá takto:


Pokud děláme klikací nadpis H2 a chceme hover nad cufónem, tak musíme při volání cufónu zavolat atribut hover a nastavit ho na true:


Musíme ještě pro IE zavolat JS funkci, která nám odstraní bug, který vykresluje cufón se zpožděním, umísťujeme ho nad ukončovací tag </body>:


Popisovat jednotlivé další nastavení nemá cenu, když na oficiálních stránkách je výborná dokumentace.

Pokud Vám i přesto není ještě něco jasné, tak se můžete podívat na stránky, kde jsem cufón hojně použil www.mytendon.cz a www.lanex.cz.

A teď potom všem vysvětlování přejdu k nevýhodám, hlavní je, že text nemůžete označit (v IE s trochou štěstí jde), proto není dobré používat na celé bloky textů, maximálně nadpisy a některé prvky, u kterých se nepočítá s kopírováním.
Celkově je cufón efektní Javascriptový nástroj, který se snad používá a posouvá web do úplně jiného levelu. Určitě doporučuji minimálně zkusit a ošahat si co umí a co se s ním dá všechno dělat :)

Přidat na facebook.com Přidat na twitter.com Přidat na delicious.com Přidat na digg.com Přidat na stumbleupon.com Přidat na reddit.com
3 komentářů
  1. Březen 19, 2010 v 07:19 Michal Pelech napsal:

    Pro neznalé ještě doplním, že JS funkce
    Cufon.now();
    se vkládá nad ukončovací tag elementu body.
    Jinak s Cufonem mám dobré zkušenosti, můžu ho doporučit.

  2. Březen 19, 2010 v 07:30 R4ms3S napsal:

    On tam umístěný byl, ale editor ho převedl jako na tag body a vložil do HTML :D

    Takže opraveno, díky ;)

  3. Duben 14, 2010 v 13:24 marty napsal:

    Jako jo, jen kdyby to nevkladalo ty inline styly :-( Ale co už. :)



Přidat komentář