Cufón vs typeface.js czyli jak zrobić ładne fonty na stronie
Każdy webmaster prędzej czy później spotyka się z problemem wymiany fontów na stronach. W “zamierzchłych” czasach problemu zasadniczo nie było. Opcje były dwie: obrazki, albo dopasowanie fonta tak, aby “jako tako” wyglądał na każdym z systemów. Wybierało się rodzinę (font-family: Arial) i problem rozwiązany. Niestety wyglądało to średnio, a o jakiejkolwiek precyzji pozycjonowania menu ciężko było mówić.
Obrazki oczywiście też nie były doskonałym rozwiązaniem… oczywiście doskonałym pod kątem wizualnym – były gwarancja, że na każdym systemie będzie to wyglądać podobnie (dobrze), ale pojawiły się problemy z SEO, wydajnością no i oczywiście przy każdej modyfikacji menu trzeba było robić obrazki dla menu raz jeszcze.
Wraz z rozwojem przeglądarek problemy z SEO i wydajnością można było rozwiązać poprzez stworzenie jednego obrazka z menu (+ drugi na :hover) a następnie pozycjonowanie tła (background-position: x y). Rozwiązanie prawie idealne, ale dalej problem z koniecznością generowania grafik przy każdej zmianie pozostał.
Na horyzoncie pojawił się sIFR – pierwsze rozwiązanie które poznałem. Rewelacja, poza faktem że było to flashowe rozwiązanie, a jak wiadomo Flasha nie lubimy już tak bardzo. Pozwalało nam ono, na wygodne renderowanie fontów TTF na stronie.
Potem wraz z rozwojem HTMLa wkroczyło trzy warte omówienia rozwiązania:
Ja zacząłem od typeface.js – bardzo fajne, bardzo proste i bardzo wydajne rozwiązanie bazujące na canvas (jak i Cufon). Do zalet można zaliczyć prostotę użycia i… szybkość działania. Niestety ma też wady: brak obsługi :hover no i całkiem spory rozmiar pliku .js z wygenerowanym fontem.
Cufon – bardzo popularny, chyba najpopularniejszy system tego typu. Działa na takiej samej zasadzie jak typeface.js – generujemy pliki .js na stronie cufona, załączamy na stronie cufona i fonty, wskazujemy jaka klasa lub tag ma być podmieniany i… to wszystko. Działa, wygenerowane pliki .js z fontami są mniejsze od typeface. Polecam
Trzecie rozwiązanie od naszego ulubionego producenta rozwiązań dla webdeveloperów to Google Font API. Problemem jest to, że nie można załadować sobie własnego fontu do systemu. Poza tym – same zalety 🙂 Rozwiązanie jest hostowane w CDNach googla, więc nic nie trzeba ładować na stronę. Wystarczy parę includów w nagłowku i… działa. Zdecydowanie polecam, jeżeli chcecie mieć ładne fonty, a możecie pójść na kompromis dotyczącu wybory fontu.