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)
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/skrypt_czcionki.js"></script>
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:
Cufon.replace('h1'); // czcionka użyta będzie w nagłówkach H1
</script>
Cufon.replace('h1')('h2')('h3')('h4')('h5')('h6'); // czcionka zostanie użyta we wszystkich nagłówkach strony
</script>
Cufon.replace('#idElementu'); // czcionka będzie użyta w elemencie o podanym w selektorze id (atrybut id="idElementu")
</script>
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: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.
Komentarze (0) - Nikt jeszcze nie komentował - bądź pierwszy!