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

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

blabla

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.

cimkék:

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

Szólj hozzá







kategóriák


del.icio.us

  • No bookmarks avaliable.

epp olvasom

  • A Clash of Kings

    A Clash of Kings by George R.R. Martin

flickr

  • Tuomas Holopainen - the Imagineer
  • The Flock
  • Christmas Crow
  • Geek joy
  • Fast Food - extreme edition
  • Teide north side
  • Teide National Park
  • Genesis
  • Rado Cerix
  • werk - _nec
  • werk - Strati

back to index