Czym jest cufon?

Cufon jest alternatywą dla sIFR. Dzięki niemu możemy zastąpić tekst fontem graficznym. Wykorzystuje on do renderowania element HTML5 – <canvas>. Element ten renderuje się razem z całą stroną. Plik czcionki jest przetwarzany do formatu SVG (grafika wektorowa). Następnie dane są konwertowane do postaci ścieżek VML, na potrzeby IE. Ostatnim etapem jest eksport ścieżek do formatu JSON. W ten sposób otrzymujemy plik JS rejestrujący naszą czcionkę bibliotece.

Użycie

  1. Konwertujemy font (w formacie TTF, OTF i podobe) do formatu Cufon, przy użyciu generatora ze strony projektu http://cufon.shoqolate.com/generate/. Wybieramy plik, zestaw znaków, potwierdzamy licencję i otrzymujemy plik JS z fontem.
  2. Dołączamy plik JS z fontem oraz bibliotekę Cufon do dokumentu HTML.
    <script src="cufon.js" type="text/javascript"></script>
    <script src="NaszFont400.font.js" type="text/javascript"></script>
    
  3. W sekcji <head> definiujemy które elementy mają być zaminiane na naszą czcionkę.
    <script type="text/javascript">
    Cufon.replace('h1');
    </script>
    

    Jeśli dołączymy do dokumentu bibliotekę jQuery możemy odwoływać się do elementów korzystając z selektorów jQuery.

    <script type="text/javascript">
    Cufon.replace('#id .class h2');
    </script>
    
  4. Możemy dołączyć w ten sposób więcej niż jeden plik z fontem. Definiujemy wtedy jakim fontem ma być zastąpiony konkretny element.
    <script type="text/javascript">
    Cufon.replace('h1', { fontFamily: 'NaszFont1' });
    Cufon.replace('h2', { fontFamily: 'NaszFont2' });
    </script>
    
  5. W pliku CSS definiujemy pozostałe właściwości fonta.

Wybór znaków

Można zaznaczyć po prostu pierwszy checkbox, co spowoduje włączenie wszystkich dostępnych znaków – będzie to jednak spore obciążenie, ponieważ plik wynikowy potrafi wtedy osiągnąć rozmiar od kilkuset KB do ponad 1MB. Jeśli czcionka nie zawiera polskich znaków generator nie umieści ich w pliku wynikowym a Cufon po prostu takiego znaku nie wyświetli. Należy znaleźć font który zawiera wszystkie potrzebne znaki lub takie znaki dorobić.

  • Dla polskich czcionek wybieramy Basic Latin i pojedyńcze znaki: ążźśęćńłóĄŻŹŚĘĆŃŁÓ
  • Dla rosyjskich czcionek należy zaznaczyć podczas kompilowania opcję Russian Alphabet. Definiuje ona zbiór znaków cyrlicy powszechnie używanych w rosyjskim języku.
  • Dla niemieckich zaznaczamy Basic Latin i Latin-1 Supplement

:hover

Z powodów wydajnościowych :hover nie jest domyślnie obsługiwany, co oznacza, że musisz go włączyć oddzielnie dla elementów, które go potrzebują. Można to zrobić w następujący sposób:

Cufon.replace('h1', {
  hover: true
});

Domyślnie cufon dodaje :hover tylko dla elementu <a>. Można to zmienić za pomocą:

Cufon.replace('h1', {
hover: true,
hoverables: { strong: true, em: true }
});

To włącza :hover dla elementów <strong> i <em>

Cufon.refresh

Jeśli zmieniamy zawartość strony, np. za pomocą AJAX lub zmienił się rozmiar czcionki, należy na zmienionych elementach zastosować metodę cufon.refresh([selektor]). Ważne jest że należy użyć takich samych selektorów jak przy użyciu Cufon.replace()

$('selector').load('/feed', Cufon.refresh);

Podsumowanie

Cufon to bardzo proste narzędzie, a zarazem bardzo skutecznie. Jest kompatybilny z wszystkimi liczącymi się przeglądarkami, łącznie z Internet Explorer 6. Wraz z ładnym wyglądem nie tracimy możliwości zaindeksowania treści przez wyszukiwarki.

Linki zewnętrzne

http://cufon.shoqolate.com/generate/

http://wiki.github.com/sorccu/cufon/about