Cufon – wszystkie czcionki w zasięgu ręki

Wielu webmasterów nie raz chciało użyć niestandardową czcionkę, lecz na przeszkodzie stał Internet Explorer. Teraz na szczęście nadeszła pomoc – Cufon. Jest to biblioteka JavaScript, która rysuje czcionki tak, by inne przeglądarki bez problemu mogły to odczytać.

Parę słów o Cufonie

Znienawidzony przez webmasterów twór Microsoftu obsługuje jedynie niewielki procent CSS 2 (o CSS 3 nawet nie ma co wspominać). Nie ma możliwości użyć tam czcionki innej niż ta, która jest w systemie, ponieważ użytkownik tego nie zobaczy.

Wprawdzie są inne przeglądarki, jednak niestety nadal spora część internautów korzysta z tego błędu ewolucji. Do tej pory webmasterzy pomagali sobie, wstawiając na stronę specjalny element Flash sIFR, który wyświetlał odpowiednie czcionki. Jednak to rozwiązanie ma swoje wady.

Nie można takiego tekstu zaznaczyć, a co za tym idzie – skopiować. Czasami na stronie znajdują się informacje, które są bardzo przydatne użytkownikom. Jeśli tekstu jest mało, to można pokusić się o przepisywanie. Jednak jeśli tego tekstu jest więcej, to taka operacja mija się z celem. Na szczęście nadeszła pomoc.

Tą pomocą jest Cufon – biblioteka JavaScript, dzięki której możemy używać na stronie dowolną czcionkę, bez obawy, że nie zostanie załadowana przez którąś z przeglądarek. Dodatkowo dzięki Cufonowi do niestandardowych czcionek, możemy dodać również efekty, które opisuje najnowsza specyfikacja CSS 3. A oto część rzeczy, które oferuje nam Cufon:

  • cień wokół czcionki
  • gradient dla czcionki
  • itp

Zasada działania

Używanie Cufona jest banalnie proste. Wpierw wchodzimy na stronę http://cufon.shoqolate.com/generate/, wybieramy czcionkę i generujemy specjalny plik JavaScript. W tym pliku zapisane są wszystkie informacje, które są niezbędne do odtworzenia danej czcionki.

Należy pamiętać, aby wybierać czcionkę z polskimi ogonkami. Jeśli wybierzemy inną czcionkę, polskie znaki zostaną usunięte i to bez wstawiania zamienników. Dla przykładu słowo „Aktualności” zostanie wyświetlone jako „Aktualnoci”.

Przy generowaniu czcionki musimy zaznaczyć, że mamy prawo do tej czcionki i że nie łamiemy prawa, używając jej. Jest to przerzucenie na użytkownika odpowiedzialności za używanie czcionek, które są nielegalnie ściągnięte z internetu lub wzięte z innego miejsca.

Na stronie wpierw importujemy bibliotekę Cufona, którą można ściągnąć ze strony projektu, a następnie wygenerowany plik z informacjami o czcionce.

Zanim jednak to zrobimy, dobrze jest zrobić sprawdzanie rodzaju i wersji przeglądarki. Chodzi o to, by używać Cufona tylko w IE w wersji 8 lub niższej, które nie obsługują importowania czcionek itp. Po co zawalać pamięć zbędnymi skryptami?

ie8=jQuery.browser.msie && parseInt(jQuery.browser.version)

Po załadowaniu całej strony, inicjujemy Cufona i określamy (CSS) jakie elementy mają zostać poddane obróbce oraz jakie efekty chcemy zastosować dla nich.

Twórcy Cufona nie zapomnieli o webmasterach, którzy używają AJAX-a na stronach. Po załadowaniu do elementu nowego kodu strony wystarczy wywołać krótki kawałek kodu, by dane elementy znów nabrały właściwego wyglądu.

Cufon.refresh()

W przeglądarkach obsługujących HTML5, Cufon jest realizowany przez Element Canvas. Jednak dziwne by było, gdyby Internet Explorer w wersji np 8 obsługiwał choć jedną komendę z tej specyfikacji.

W takich wypadkach jest wykorzystywany format SVG oraz VML, który jest na rynku już od wielu lat i jest obsługiwany przez wszystkie przeglądarki (zaczynając od Internet Explorera 6).

Jak widzicie, używanie Cufona nie jest niczym skomplikowanym i bez problemu można go używać na stronie.

Twitter Obserwuj mnie na Blip.pl 

Komentarzy: 2

wujekbogdan
12 czerwca 2012 o 10:30

Na samym początku wpisu mamy spory błąd. IE (nawet bardzo stare 5.0!) całkiem dobrze radzi sobie z @font-face, z tym że fonty trzeba mu zaserwować w microsoftowym formacie eot, który możemy wygenerować dowolnym generatorem web fontów, choćby popularnym fontsquirrel: http://www.fontsquirrel.com/.

Cufón to IMO ostateczność, stosuję go tam gdzie z jakichś powodów (najczęściej brzydki anti-aliasing) fonty załączane za pomocą @font-face wyglądają źle.

Miwol
12 czerwca 2012 o 10:44

Dzięki za informację.
Nie słyszałem o tym rozwiązaniu ani o tym formacie.
Na pewno się tym zainteresuję i w przyszłości z pewnością je opiszę.

Dodaj komentarz

Twój komentarz

CommentLuv badge