chevron-left chevron-right

[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/sifr.js" type="text/javascript"></script>
		<script src="js/sifr-config.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:

		var czcionka = { src: 'font/czcionka.swf' };
		sIFR.activate(czcionka);
		sIFR.replace(czcionka, { selector: '.sifr' });

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:

		var czcionka = { src: 'font/czcionka.swf' };
		sIFR.activate(czcionka);
		sIFR.replace(czcionka, { 
			selector: '.sifr',
			css: [
				'h2 { font-size: 22px; background-color: #cccccc; padding: 5px; }',
				'em { font-style: italic; }',
				'strong { font-weight: bold; }',
				'a { text-decoration: none; }',
				'a:hover { text-decoration: underline; }'
			]
		});

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.