[CSS][JS] Metody dodawania ładnych czcionek na stronę

Cufon

Twierdzi się, że Cufon jest dobrą alternatywą dla metody sIFR. Jako następca Typeface jest o wiele łatwiejszy w implementacji i posiada pełną obsługę CSS.

Implementacja kodu na stronie WWW

Podobnie jak w powyższych przykładach, do sekcji head należy dodać odpowiedni kod JS:

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

W ten sposób, Cufon domyślnie podmienia czcionki w nagłówkach na te "embedowane".
Można też rozszerzyć sposób działania Cufon poprzez dodanie krótkiego kodu JS, który pomoże nam zdefiniować które elementy mają być podmieniane:

Cufon.replace('.cufon');

Powyższy kod zastosuje nową czcionkę dla elementów mających klasę Cufon. Należy pamiętać o tym, by do pliku strony dołączyć bibliotekę jQuery w celu poprawnego działania powyższego kodu.

Problem z działaniem w IE

Cufon wykazuje pewien problem w działaniu w przeglądarkach Internet Explorer. Objawia się on tym, że jest niewielkie opóźnienie w czasie zanim czcionka zostanie podmieniona. Dlatego, aby temu zapobiec, należy na koniec strony, tuż przed znacznikiem końcowym sekcji body wstawić taki kod:

<script type="text/javascript"> Cufon.now(); </script>

Dzięki niemu, nie będzie już opóźnienia w podmianie czcionek w przeglądarkach Internet Explorer.

Zalety i wady

Zalety

• szybkie działanie
• lepsza obsługa CSS niż w przypadku Typeface
• do działania nie potrzebuje obsługi Flash tylko JavaScript
• jest możliwość używania wielu różnych czcionek

Wady

• brak możliwości zaznaczania tekstu
• tekst jest generowany jako obraz
• problemy z licencjami czcionek
• czcionki muszą być sformatowane w UTF-8

Cufon - Podsumowanie

Cufon na pewno dobrą alternatywą dla sIFR, ale ze względu na problemy z zaznaczaniem tekstu, który staje się obrazkiem, może się ta metoda okazać bezużyteczna w pewnych przypadkach.