Przeglądając kilka metod na osadzanie czcionki w serwisach, pomiędzy sIFR, a font-face, po dość stare rozwiązanie z zamiana czcionki na obrazki, znalazłem Cufona. Jest to rozwiązanie bazujące na generowaniu czcionki całkowicie poprzez JavaSrcipt oraz funkcjonalnością HTML5 – <canvas>. Cufon po kilku testach jest też najlepszy wizualnie tzn. generuję czcionkę najlepiej i najbliżej projektowi w Photoshopie, w szczególności dla mniejszych rozmiarów czcionek, z czym np. ma problem font-face. Jest to też metoda bardzo wygodna w użyciu.
Jak używać Cufon?
Używanie Cufona jest proste.
1) Wchodzimy na stronę cufon.shoqolate.com/generate/ i ściągamy plik cufon-yui.js
2) Ściągamy najnowszą wersję bibloteki JQuery
3) Konwertujemy pliki czcionki – formaty TFF, OTF, PFB, poprzez generator na stronie. Wygląda to tak – wybieramy czcionkę do uploadowania w odpowiednim kroju, następnie zaznaczamy interesujące nas zakresy znaków i zaznaczamy akceptację regulaminu.
- dla polskich znaków zaznaczamy – Basic Latin, Latin-1 Supplement, Latin-Extended-A, Latin-Extended-B
4) Ściągamy wygenerowany plik Javascript – czcionka.js
5) W sekcji <head> dołączamy obydwa pliki do serwisu:
<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”czcionka.js” type=”text/javascript”></script>
6) Definiujemy elementy dla , których Cufon na zadziałać:
<script type=”text/javascript”>
Cufon.replace(‘h1′);
</script>
W tym przypadku oznacza to zamianę każdego nagłówka typu H1, na naszą czcionkę.
Jeżeli dołączamy więcej niż jeden plik z czcionką elementy definiujemy w taki sposób:
<script type=”text/javascript”>
Cufon.replace(‘h1′, { fontFamily: ‘naszaczcionka1′ });
Cufon.replace(‘.jakas_klasa’, { fontFamily: ‘naszaczcionka2′ });
</script>
Cufon to duży zbiór zalet – działa pod IE6.0 (jeżeli ktoś jeszcze tworzy pod tą przeglądarkę) , łatwość konfiguracji, brak dodatkowych playerów do odtworzenia oraz szybkość działania.
Należy jednak pamiętać o kwestii prawnej – nie każda licencja czcionki pozwala na jej osadzenie na stronie www bez łamania praw autorskich.
Powiązane wpisy:
- 10 nowych darmowych czcionek dla web designerów Listopadowa porcja darmowych czcionek dla web developerów i web designerów....
- 20 darmowych czcionek 20 DARMOWYCH CZCIONEK Wiemy, że typografia może być stosowana jako...
- 10 darmowych czcionek dla designerów Dobra typografia jest wstanie wzmocnić każdy projekt graficzny. Odpowiednie dobranie...
- 10 darmowych czcionek Oto najnowsze próbki darmowych czcionek, w sam raz do użycia...
- 10 tools for the webdeveloper Budowa nowej strony www to dość pracochłonne zajęcie. Trzeba uwzględnić...
