_nec - webfejlesztés, front-end programozás, javascript, css, xhtml, ajax, air

Cufón – saját font, flash nélkül

Itt a blogon, és máshol is előszeretettel alkalmaztam egy flash alapú font megjelenítő megoldást, ami véletlenül sem a sIFR volt. Azzal kapcsolatban régóta több fenntartásom is volt, kényelmesebb volt a saját megoldásom használni, ismerve annak limitációit.

Nemrég viszont elémkerült a cufón, egy tisztán JS alapú megoldás, ami egészen zseniális.

Működése eléggé komplex, mivel a betűtípusok grafikáit kénytelen a böngésző saját eszközeivel megrajzolni. Ehhez a canvas elemet, Explorer alatt pedig annak natív VML támogatását használja ki.

A használni kívánt betűtípusból egy online generátor segítségével SVG alapú fontfile készül, amit a cufón számára VML görbékké számol át. Ezekkel már képes canvas elemre rajzolni, vagy vml elemeket készíteni.

A generátornál – a flashez hasonlóan – megadhatjuk mely karakterkészleteket akarjuk beemelni, ezzel optimalizálva a kapott font állomány méretét. A fontfile-t rögzíthetjük egy domainhez, ilyenkor az elkészült javascript “font” kódolásába bevonja az adott domaint, ezzel is védve a megvásárolt fontokat.

Ha nem bízunk a generátorban, saját dárga betűkészleteinket, vagy az ügyfél által készítetett teljesen egyedi TrueType fontot féltve, letölthetjük a generátor forrását, és azt saját fejlesztői szerveren futtatva, elkészíthetjük a font javascript megfelelőjét.

Ha kész a font, csak be kell emelni a html kódunkba, magával a cufón scripttel együtt, és amikor szükség van rá, javascriptben ráereszteni a kívánt css selector-ra.

<script src="/js/cufon.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/myfont.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>

Az összes elterjedt böngészőben használható de előtte legyünk tisztában a korlátaival, nem igényel külön plugint, és érdemes egy pillantást vetni pár tesztoldalra vele.

Hozzászólások, trackbackek [trackback url]

1. deadcabbit 14:42 | 2009.05.20

   Úgy általában a vml-től feláll a hátamon a szőr (az MS meg nyaljon lovat a Silverlighttal, canvas-t akarok), én is asszem maradok sajátnál, ha már :)

2. _Nec 15:40 | 2009.05.20

   pedig meglepoen jol mukodik ez a cucc ie alatt is, es gyorsabb mint a flash, erdemes megnezni :)

3. deadcabbit 16:17 | 2009.05.20

   Megnéztem minden böngőben, ie8 (is) elsőre nagyon teker a vml miatt (volt a performance para vml+quirks körül), de utána tényleg rendben van – azonban Chrome-nál a teszt esetekből volt olyan, amelyik hiányos volt (nem jelent meg ez-az) – ettől függetlenül nem zárom ki, hogy bevetem majd, felírom.

4. deejayy 06:32 | 2009.05.22

   Próbálkoztam már én is régebben SVG fontokkal, de olyannyira lelassította egy-két cím a böngészni kívánt oldalt, hogy elálltam tőle.

5. gex 15:45 | 2009.05.25

   nem árt jól megválasztani a betűtípust hogy ne legyenek gondok a speciálisabb (gondolok itt az ő ű) karakterekkel. pl: http://nec.shell8.net/2008/10/22/adobe-air-sqlite-javascript/

6. _nec 15:59 | 2009.05.25

   hat igen, erre oda kell figyelni, bar ez a betukeszlet hibaja, nem a megoldase :D

7. nemeseri 07:33 | 2009.06.03

   Kicsit korbejartam a dolgot… ket param van vele:
   1., Kicsit nagyobb a JS file amit general a flashnel
   2., Bizonyos screenreaderek nem kezelik jol a spanekbe zart szavakat.

   Amugy nagyon jo megoldas, tetszik.

   http://www.456bereastreet.com/archive/200905/cufon_and_screen_readers/

8. Gixx 13:11 | 2009.06.30

   Na úgy tűnik az FF 3.5-tel megoldódni látszik ez a fajta probléma is: http://weblabor.hu/blog/20090629/szovegek-tetszoleges-betutipussal-css-sel

   Már csak az Opera10-re kell várni.

   Az IE Embeded Open Type-ot használ (.eot), de szerencsére van konverter. Ki kéne próbálni, hátha.

9. Ördög Zoltán 13:14 | 2009.09.04

   Sziasztok!
   Igazából nem rossz a cuccos, de egy komoly internet exploreres hiba van benne amit még nem tudtam orvosolni, illetve nem találtam rá megoldást.
   Ha linkeket készítek vele, akkor az internet explorer nem a betű halmazt hanem csak a betűket linkeli. Így trükközni kell az egérrel hogy a betűk cingár vonalaira tudjunk bökni :((

   Aki tud megoldást az szóljon ám! :))

10. Ördög Zoltán 01:09 | 2009.09.05

    közbe megoldottam a kérdést. Fogalmam sincs mitől lehet, de csak akkor megy rendesen az IE linkelés, ha a html-t a következőképp nyitom meg:

    tehát xhtml…. fura de most jó :)

11. Ördög Zoltán 19:43 | 2009.09.09

    sorry bővíteném a hozzászólásom:

    xhtml fejjel, csak ie8-ban oldódik meg a probléma. továbbmentem… ahoz hogy a transparent png-k átlátszó részei is linkelve legyenek a “display:block;” szükséges…

    bocs hogy 3x kommenteztem, de erre nem találtok megoldást sehol! 2 napig keresgéltem mire rájöttem magamtól.

    bye