Bejárat > JavaScript > cufon vs. sIFR

cufon vs. sIFR

Ezt a két font replacement technikát próbáltam a gyakorlatban. Előbb a sIFR-t, mely elég bonyolult megoldásnak tűnt nekem, azáltal, hogy előbb flashben kellett beágyazni a karaktereket, majd a honlapon beágyazott flash fájlok is egyrészt lassúak voltak, néha problémás volt a pozicionálásuk, másrészt speciális esetekben gond volt a :hover tulajdonsággal és az együtt használt jQuery-vel is. A múltkorában viszont kipróbáltam a cufon-t és leesett az állam, hogy ez lehet ilyen egyszerű is. Van hozzá generátor az előbb linkelt oldalon, ami legenerálja a font fájlunkból a JavaScriptet, majd a beágyazás és használat is hasonlóan pofonegyszerű. Később találtam meg, hogy a sIFR-hez is fellelhető generátor, ami jó, viszont azzal a hiányossággal bír, hogy ékezetes karaktereket pl. nem vehetünk fel bele külön. Szóval összefoglalva:

cufon: A betűk grafikáit saját eszközeivel rajzolja meg. IE alatt VML-t, amúgy pedig a canvas elemet használja. Gyorsabb mint a sIFR, rendelkezik a Typeface.js előnyeivel, van hozzá generátor. Hátránya, hogy nem minden fontot tudunk így alkalmazni, illetve a hover tulajdonságot és a szövegek kijelölését is mellőznünk kell.

siFR: Előnye, hogy kijelölhetjük a szöveget, flashben könnyen tehetünk a szövegre árnyékot, anti-aliasing-ot, effekteket. Hátránya a betöltődési idő és hogy a flash és JavaScript engedélyezésére is szükség van kliens oldalon.

Nem írtam róla részletesen, de hogy a népszerűbbek a listában legyenek, meg kell még említeni, hogy van még FLIR, amely PHP-t és a GD függvénykönyvtárat használja és nála sem lehet kijelölni sajnos a szöveget.

Ti melyiket használjátok és mik a tapasztalatok?

Categories: JavaScript Tags: , , , ,

Kapcsolódó cikkek

  1. zsottya
    2010. jún. 20. 00:02-kor | #1

    Üdv, új vagyok erre :) de szeretnék hozzászólni a témához.
    A sifr-t próbáltam már de néhány esetben eléggé lassú volt az oldal betöltése, ezért keresgéltem és rátaláltam a sima css megoldásra itt:
    http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

    Igaz nem tökéletes de jobb mint scripttel mókolgatni :)

  2. csibra
    2010. dec. 30. 11:32-kor | #2

    Szerintem mindkettő zsákutca. A megoldás a CSS @font-face. Ugyan még nem támogatja minden böngésző egységesen, de ez már nem sokáig lesz így.

  1. október 3rd, 2010 17:59-kor | #1