MC, 13:16 wtorek, 31.01.2012 r.
Ilustracja do artykułu: Cufon - Dowolona czcionka na stronie internetowej

Cufon - Dowolona czcionka na stronie internetowej

Każdy kto choć przez chwilę pracował przy tworzeniu strony internetowej, wie jak uciążliwym zagadnieniem jest wybór czcionki, która niestety musi znajdować się w systemie osoby przeglądającej stronę, aby mogła zostać użyta, co radykalnie zawęża zakres możliwości do kilku czcionek. Istnieją jednak sposoby na użycie dowolnej czcionki na stronie i dziś chciałbym zaprezentować najrozsądniejszy z nich - bibliotekę Cufon, która choć w pewnym stopniu pozwoli nam na dowolność wyboru czcionek na stronę.

Czym jest biblioteka Cufon?

Cufon jest biblioteką napisaną w Javascript, wykorzystującą udogodnienia HTML 5, co zapewnia dużą szybkość w jej działaniu. Dzięki niej możemy przetworzyć dowolną czcionkę (oczywiście w granicach posiadanych licencji na te czcionki) na dodatkowy skrypt js i tym samym wykorzystać ją na stronie internetowej.

Jak skorzystać z Cufon?

Pierwszym etapem do wykorzystania dowolnej czcionki na stronie jest pobranie biblioteki Cufon i wygenerowanie skryptu dla czcionki. Dokonamy tego przechodząc na stronę cufon.shoqolate.com/generate. Jeżeli zależy nam na używaniu polskich znaków, należy w części "Include the following glyphs (if available)" zaznaczyć następujące następujące opcje:
  • Basic Latin
    Basic Latin glyphs within the Unicode range 0x0020 to 0x007E. (95 glyphs)
  • Latin-1 Supplement
    Latin glyphs within the Unicode range 0x00A0 to 0x00FF. Includes punctuation, currency symbols, numerals and common accented characters. (96 glyphs)
  • Latin Extended-A
    Extended Latin glyphs within the Unicode range 0x0100 to 0x017F. (128 glyphs)
  • Latin Extended-B
    Extended Latin glyphs within the Unicode range 0x0180 to 0x024F. (208 glyphs)
Warto również zastanowić się, czy nie będą nad interesowały inne dodatkowe znaki i ewentualnie wybrać je z listy opcji.

Gdy mamy już pobrane obydwa skrypty (bibliotekę Cufon i skrypt czcionki), musimy dodać je w sekcji nagłówkowej strony (sekcja <head>)

<script type="text/javascript" src="sciezka_do_skryptow/cufon-yui.js"></script>
<script type="text/javascript" src="sciezka_do_skryptow/skrypt_czcionki.js"></script>
Teraz wszystko jest gotowe do użycia czcionki.

Ostatnim etapem jest wybór elementów strony, w których czcionka ma zostać użyta. Robimy to za pomocą skryptu js w sekcji nagłówkowej strony. Kilka przykładów:

<script type="text/javascript">
Cufon.replace('h1'); // czcionka użyta będzie w nagłówkach H1
</script>
<script type="text/javascript">
Cufon.replace('h1')('h2')('h3')('h4')('h5')('h6'); // czcionka zostanie użyta we wszystkich nagłówkach strony
</script>
<script type="text/javascript">
Cufon.replace('#idElementu'); // czcionka będzie użyta w elemencie o podanym w selektorze id (atrybut id="idElementu")
</script>
<script type="text/javascript">
Cufon.replace('.jakasKlasaElementow'); // czcionka zastosowana będzie we wskazanej klasie elementów (atrybut class="jakasKlasaElementow"
</script>

Jak widać wybór elementów odbywa się poprzez dobrze znane selektory (jak dla css, czy np. jQuery). Jednak by mieć możliwość korzystania z ich pomocy, należy pamiętać o dostarczeniu do strony silnika obsługującego go (np. jQuery czy Prototype). Oczywiście te selektory możemy łączyć.

Czy można używać kilku czcionek?

Oczywiście mamy możliwość kilku czcionek. W takim wypadku, po wygenerowaniu odpowiednich skryptów i dołączeniu ich do strony, należy wskazać dla którego elementu, jaka czcionka ma zostać zastosowana. Prosty przykład:
<script type="text/javascript">
Cufon.replace('h3', {fontFamily : 'nazwaPierwszejCzcionki'});
Cufon.replace('#idElementu', {fontFamily : 'nazwaDrugiejCzcionki'});
</script> Myślę, że powyższy przykład jest klarowny i nie wymaga komentarza.

Co z kolorem, rozmiarem i dekoracjami tekstu?

Jeśli chodzi o kolory, rozmiary czcionki, czy kursywy itp. to na szczęście nie musimy nic dodatkowo robić - zastosowane zostaną style zdefiniowane, czy to w kodzie HTML, czy w arkuszach CSS.

Czy strona pozostanie przyjazna dla wyszukiwarek?

Biblioteka Cufon jest "SEO Friendly" i możemy używać jej bez obaw, że nasze strony będą źle poindeksowane a treści wykorzystujące Cufon pominięte.

Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!

Imię:
Treść: