Tag Archives: cufon

Cufon – Javascriptový plugin pro nahrazování fontů na webu

Někteří z vás už se určitě setkali s problémem, kdy musíte  nakódovat šablonu podle designu, v kterém jsou použity ne příliš běžné fonty. Popř. máte na svém webu font, který vy ve svém prohlížeči sice vidíte správně, ale návštěvníci už mají písmo jiné.

Kde Cufon vzít?

V případě, že máte rádi javascript (nemají jej rádi všichni – podle našich statistik má js vypnuto 15-20% návštěvníků některých našich webů), mám pro vás řešení v podobě pluginu Cufon.

Jeho použití je opravdu jednoduché. Na webu pluginu Cufon si jednoduše stáhnete kód, který vložíte na své internetové stránky. Dále je třebavygenerovat kód fontu a opět jej umístit na web.

  1. <head>
  2.   <script src="cufon-yui.js" type="text/javascript">
    </script>
  3.   <script src="vas-font.font.js" type="text/javascript">
    </script>
  4. </head>

Jak změnit fonty?

Kód máme vložen. Nyní už stačí jen pomocí příkazu změnit cílovému prvku font.

  1. <head>
  2.   <script type="text/javascript">
  3.     Cufon.replace('p');
  4.   </script>
  5. </head>
  6. <body>
  7.   <p>Text, kterému změníme font</p>
  8. </body>

Optimalizace

V případě, že jste si vygenerovali kód fontu a jeho velikost se blíží (či dokonce překračuje) velikost 1MB, zbystřete! Vaše internetová prezentace se vám bude načítat nepříjemně dlouho. Zde je pár tipů, jak Cufon optimalizovat:

  1. Při generování vlože jen ty typy písma, které využijete (regular, bold, italic, bold italic).
  2. Zatrhněte jen ty druhy písma, které využijete (uppercase, lowercase,  Latin-1 Supplement…). V žádném případě nezatrhávejte All! Velikost výsledného souboru by byla několik MB!
  3. Nejlepšího výsledku dosáhnete, když do „.. and also these single characters“ vložíte přesně ty znaky, které potřebujete – např. české znaky s diakritikou áčďéěíňóřšťúůýžÁČĎÉĚÍŇÓŘŠŤÚŮÝŽ + uppercase, lowerase a numeral a máte veškeré potřebné české znaky.