Cufón – dobra alternatywa dla sIFR

Od jakiegoś czasu możemy korzystać z nowej alternatywy dla sIFR (Scalable Inman Flash Replacement), czyli technologii, dzięki której możemy zastąpić zwykły tekst systemowy np. nagłówków na font graficzny.

Wady sIFR

sIFR oparty jest o technologię Flash, a więc do jego działanie niezbędny jest Flash Player. Wiąże się to z jeszcze jedną istotną wadą – sIFR zastępuje systemowy tekst dopiero po załadowaniu strony. Widzimy przez to przeskok i w pierwszej kolejności pojawiają się nam zwykłe, systemowe nagłówki.

Cufón

Cufón eliminuje te niedogodności. Po pierwsze wykorzystuje on do renderowania element HTML5 – <canvas>, czyli metodę skryptowego, dynamicznego renderowania bitmap. Wyklucza to konieczność posiadania pluginu w postaci Flash Playera. Po drugie zniwelowany jest zauważalny w sIFR przeskok, bo element <canvas> renderuje się razem z resztą strony.

Użycie

Na początku konwertujemy interesujący nas font do formatu Cufón, przy użyciu udostępnionego generatora.
Później dołączamy plik JS z fontem, oraz plik JS z biblioteką Cufón do dokumentu HTML.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Frutiger_LT_Std_400.font.js" type="text/javascript"></script>

W <head> strony definiujemy także, który element strony ma zostać podmieniony.

<script type="text/javascript">
Cufon.replace('h1');
</script>

Możemy także dołączyć do dokumentu bibliotekę jQuery i odwoływać się bardziej precyzyjnie, korzystając z jej selectorów.

<script type="text/javascript">
Cufon.replace('#cr h2');
</script>

Do dokumentu możemy dołączyć więcej niż jeden plik z fontem. Wtedy możemy zdefiniować jakim fontem ma być zastąpiony konkretny nagłówek.

<script type="text/javascript">
Cufon.replace('h1', { fontFamily: 'Frutiger LT Std' });
Cufon.replace('h2', { fontFamily: 'Myriad Pro' });
</script>

Na końcu w CSSie definiujemy wielkość fonta, kolor oraz styl.

h1 {font-size:20px; color: #000; font-weight:bold;}
#cr h2 {font-size:10px; color: #fff;}

Kompatybilność

Cufón jest kompatybilny z wszystkimi liczącymi się w tej chwili na rynku przeglądarkami, także z Internet Explorerem w wersji 6.

Plugin do WordPress

W maju powstał plugin do WordPress’a ułatwiający integrację Cufón z blogiem.

Dziękuję Sewerynowi z Netizens za zawzięcie z jakim poszukiwał dobrej alternatywy dla sIFR :)

Linki

Generator:
http://cufon.shoqolate.com/generate/

Dokumentacja:
http://wiki.github.com/sorccu/cufon/about

Plugin do WordPress:
http://wordpress.org/extend/plugins/wp-cufon/

Powiązane wpisy:

Tagi

, , , ,

komentarze

skomentuj
  • Pwl
  • 10/07/2009 14:24

sIFR umożliwiał zaznaczanie i kopiowanie przerobionych nagłówków
Cufon tego nie potrafi :(

Tłumaczą to tym, że nie wiedzą jeszcze jak to rozwiązać pod niektórymi przeglądarkami, ale docelowo taka opcja będzie dostępna.
Mi akurat tego tak bardzo nie brakuje, bo Cufón używany jest z reguły do nagłówków, które rzadko potrzebujemy kopiować.

Miałem popełnić wpis na temat Cufón, a widzę, że już wszystko wyjaśnione :(

  • lm
  • 09/02/2010 14:28

a czy ktoś pokusiłby się o wypunktowanie wad Cufon’a ?

Na pewno kwestia licencjonowania fontów. Nie każdy typ licencji pozwala na zamieszczanie fonta w serwisie w ten sposób.
Mankamentem może być też brak możliwości zaznaczania we wszystkich przeglądarkach, co ma być w przyszłości uzupełnione.

Cufon nie do końca dobrze radzi sobie też z IE6. Używając go w rozbudowanym serwisie napakowanym innymi JSami musimy liczyć się z tym, że Cufon będzie się działał różnie lub wcale.

[...] Cufón - zamienia czcionki na wektory VML (Vector Markup Language) przechowywane w formacie JSON (JavaScript Object Notation) i renderowane za pomocą silnika, napisanego w JavaScript. Linki: Generator czcionki / Plugin WP-Cufon do WordPress / więcej po polsku na http://www.bcymer.com. [...]

RSS do komentarzy dla tego posta. TrackBack URL

dodaj komentarz

Najnowsze

Gorąco polecam

Kategorie

RSS

Bartek Cymer