Często projekty naszych stron wyglądają fantastycznie w Photoshopie. Wykorzystujemy w nich piękne i nietypowe czcionki, kodujemy szablon i umieszczam na serwerze. Niestety przy użyciu nietypowych czcionek nasi czytelnicy, którzy nie mają ich zainstalowanych lokalnie po prostu ich nie zobaczą i efekt wizualny nie będzie już taki atrakcyjny.
Aby poradzić sobie z tym zagadnieniem, musimy tak skonfigurować czcionki na stronie, aby u każdego wyświetlały się prawidłowo. Aby to zrobić wykorzystamy skrypt JS o nazwie Cufon.
Cufon jest rozwiązaniem coraz częściej spotykanym ze względu na to, że w przeciwieństwie do sIFR’a nie musimy korzystać z FLASH’a, tylko z elementu <canvas> stosowanym w HTML5. Takie rozwiązanie działa szybciej i jest wygodniejsze we wdrażaniu.
Instalujemy Cufon:
Aby skonfigurować Cufon na własnej stronie najpierw musimy pobrać plik cufon-yui.js z tej strony: cufon.shoqolate.com
Następnie na tej samej stronie korzystamy z formularza, aby wgrać naszą czcionkę z dysku. Jeżeli potrzebujemy polskich znaków to w sekcji “include the following glyphs (if available)” zaznaczamy Basic Latin, Latin-1 Supplement, Latin-Extended-A, Latin-Extended-B, akceptujemy regulamin („Eula” i „Terms”) i klikamy „Let’s do this!”.
Teraz automatycznie zostanie dla nas wygenerowany plik o nazwie nazwa_czcionki_400.font.js.
Mamy już wszystko, więc czas umieścić skrypty na naszej stronie czy szablonie. Wgrywamy te pliki na nasz serwer i między tagami <head> i </head> wklejamy ten kod (pamiętajmy o zmianie nazwy pliku z czcionką na własną nazwę):
<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”nazwa_czcionki_400.font.js” type=”text/javascript”></script>
Teraz wystarczy tylko zdefiniować, które elementy będą wymieniane na naszą czcionkę. Wymieniamy je w „headzie” strony w następujący sposób:
<script type=”text/javascript”>
Cufon.replace(‘h2′);
</script>
Korzystanie z kilku czcionek:
Mamy również zastosowania różnych czcionek do różnych elementów. Aby to zrobić należy wygenerować plik .js dla każdej naszej czcionki i dodać je w headzie metodą opisaną wyżej. Następnie dodajemy np. taki kod:
<script type=”text/javascript”>
Cufon.replace(‘h2′, { fontFamily: ‘nazwa_czcinki_1′ });
Cufon.replace(‘.dowolna_klasa’, { fontFamily: ‘nazwa_czcionki_2′ });
</script>
Mam nadzieję, że ten opis pomógł Ci w konfiguracji Cufon. Jeżeli masz jakieś problemy albo po prostu chcesz się przywitać to napisz poniżej komentarz.
Powyższy artykuł znajdziesz również na blogu autora: http://wmroczkowski.pl