12. 5. 2009 v sekci webdesign:

Cufón – dosavadní zkušenosti

Cufón je technika, kterou můžete na web dostat své vlastní písmo a typografie tak dostává nový rozměr.

Cufón jsem zatím využil na třech projektech (spuštěný je pouze redesign filosof.biz – aneb ozkoušení cufónu v praxi) a jsem z něj nadšený. Cufón představuje javascriptovou alternativu k náhradě textu obrázkem pro nadpisy či delší texty tam, kde nechcete phpkem generované obrázky či flash.

Neznamená ovšem konec image replacementu jako takového (logíčko projektu či různé komplikovanější kombinace obrázků a textu si prostě nenapíšete).

Jak použít cufón?

  1. Sežeňte si font, který můžete embedovat do webu bez použití flashe. Bez problému jsou unikátní korporátní písma na zakázku (ale takových moc není), písma zdarma (kdyby ne, tak mě opravte), písma od Adobe či písma ze Štormovy písmolijny (ověřeno u pana Štorma emailem)
  2. Přejděte na generátor cufónu a nechte si vygenerovat písmo – čím méně znaků bude písmo obsahovat, tím menší bude výsledný soubor (standardně se dostávám na 20kB font + 15kB cufón engine, šok jsem zažil poprvé, kdy jsem vygenerovat písmo o třech řezech a výsledek měl přes 200kB)
  3. Přečtěte si nápovědu, kterak dostat cufón do stránky (je to vážně jednoduché – stačí includovat pár souborů a zkopírovat jednu definici, díky které cufón pozná, na co se má aplikovat)
  4. Jestliže chcete používat cufón pouze pro určité třídy či specifické elementy na stránce a nestačí vám definice typu nahraď všechny nadpisy H1, přidejte si i váš oblíbený JS framework (cufón rozpozná jQuery, MooTools, Dojo and Prototype)
  5. vesele cufónujte!

Na co jsem narazil

  • ladění kódu s cufónem pro IE6+7 zabere více času, protože musíte typograficky více vychytávat paddingy a marginy nahrazeným textům (a skutečná legrace nastává u absolutního pozicování některé z částí nahrazovaného textu a podobných šílených hrátkách)
  • urban legend, že cufón neumí :hover (umí! – viz Cufón – Styling zcela dole)
  • text vypsaný cufónem neoznačíte myší

Kdy cufón určitě nepoužít

  • delší bloky textu
  • nadpisy u blogů, zpravodajských portálu a stránek, kde předpokládáte, že na vás bude někdo odkazovat či vás citovat (v obou případech cufón brání zpětným odkazům, protože si text prostě neoznačíte)
  • když nemáte licenci pro písmo, která neumožňuje web embeding
  • potřebujete nahradit relativně málo textu (tudíž vystačíte se statickým nahrazováním)

Související odkazy

Komentáře

rss komentářů
1. David Grudl
12. 05. 09, 13.10

Zrovna včera jsem Štormovo písmo pořídil na La Trine (viz http://www.latrine.cz/…-a-microsoft).

Zajímavé je, že :hover mi tam funguje i bez manuálnáho zapnutí, jak je uvedeno v tom Cufón Styling.

2. SuE
12. 05. 09, 13.11

a nedá mi to, přihodím link na překlad té wiki (pro české lamy)
http://suewebik.net/index.php?…

3. Ondrej
12. 05. 09, 14.28

Potvrzuji Honzovy zkusenosti. Cufon pouzivam rovnez a jsem z nej nadseny.

4. Pavel Maček
16. 05. 09, 16.39

Cufón mě taky nadchl. To označování je ale nepříjemné. Nicméně, text označit lze (a tedy i zkopírovat), jen to nejde vidět (což se dá ale brát tak, že se nedá označit :) ).

5. Rape
18. 05. 09, 22.02

Víc než nepříjemné, ne-li zásadní…