Cufon – dowolny font na stronie internetowej

Czas czytania: 2 minut

Cufon jest metodą ale także narzędziem (skryptem) do stworzonym do umieszczania niestandardowych fontów (fonts) na stronie internetowej. Za jego pomocą można zastąpić zwykły tekst na tzw. font graficzny. 

Cufon tworzony jest przy wykorzystaniu JavaScript, który generuje na podstawie zwykłego fontu (czcionki) specjalny plik. Po podpięciu go do strony podmienia on tekst na specjalnie wygenerowany dzięki czemu zyskuje on cechy odpowiedniego fontu.

Warto wiedzieć

Przy projektowaniu strony internetowej zawsze trzeba pamiętać, że nie wszyscy użytkownicy internetu posiadają zainstalowane w komputerze te same fonty. Przeważnie w każdym systemie znajduje się

  • Verdana,
  • Tahoma,
  • Arial,
  • Time New Roman,
  • Georgia.

Pozostałe fonty zależą od indywidualnych upodobań właściciela komputera oraz wersji posiadanego systemu. Wybór kroju fontu do strony jest więc bardzo ograniczony. Dlatego też informatycy by wyróżnić swoje strony stosują różne metody urozmaicenia. Sposobów jest kilka

  • flash (sIFR)
  • Obrazek
  • Cufón
  • Google fonts

Każda z tych metod ma swoje wady i zalety. Jeśli jednak chcemy otrzymać ciekawy jak najniższym kosztem efekt warto zainteresować się cufonem.

Instalacja Cufónu

W celu stworzenia Cufónu na stronę na początku trzeba zapleść plik fonta. Standardowo fonty znajdują się w Windows na dysku systemowym np. C:\Windows\Fonts.

Następnie trzeba wejść na stronę z generatorem Cufón:

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

Za pomocą zamieszczonego programu tworzy się plik który trzeba dołączyć do strony.

W sekcji <head> dołączamy dwa ściągnięte pliki .js:

<script src=”cufon-yui.js” type=”text/javascript”></script>
<script src=”naszaczcionka_400.font.js” type=”text/javascript”></script>

Następnie definiujemy elementy, których font ma zostać zmieniona, np.:

<script type=”text/javascript”>
Cufon.replace(‘h1′);
</script>

Powyższy kod oznacza, że wszystkie nagłówki h1 będą wyróżnione naszym fontem.

Jeżeli dołączamy więcej niż jeden plik z elementy definiujemy w taki sposób:

<script type=”text/javascript”>
Cufon.replace('h1', { fontFamily: 'naszaczcionka1' });
Cufon.replace('.jakas_klasa', { fontFamily: 'naszaczcionka2' });
</script>

Na początek to powinno wystarczyć by wzbogacić naszą stronę.

Alternatywą dla tej metody jest usługa Google Fonts, jednak w przeciwieństwie do niej pliki te są obsługiwane praktycznie na wszystkich przeglądarkach.

Powiązane wpisy: