Specjalne czcionki na stronie www

Pierwszy post o skrypcie umożliwiającym wzbogacenie strony www o specjalne czcionki, czyli takie jakich użytkownik może nie mieć zainstalowanych na komputerze. Niestety nie ma 3-linijkowego rozwiązania problemu ładnych czcionek działającego pod różnymi przeglądarkami.
Popularne rozwiązanie to skrypt: sifr (oparty o flash i js).
Ja używam nieco innego skryptu bazującego na PHP i JS (opis rozwiązania po angielsku).
Dla osoby nie znającej flasha jest na pewno bardziej zrozumiałe, a co za tym idzie łatwiej można go modyfikować, a ponadto zadziała również w przeglądarce bez zainstalowanej wtyczki adobe...

Czego nam potrzeba:
1. plik fonta w formacie ttf (konwersja fonta online)
2. skrypt php, który będzie nam generował napisy ładną czcionką (heading.txt - po pobraniu zmień rozszerzenie na .php)
3. skrypt .js, który podmieni napisy napisane brzydką czcionką, na ładne (replacement.js)

Krótkie wyjaśnienie działania:
heading.php - generuje obrazek w formacie PNG, na którym wypisuje tekst przekazany w parametrze text - po prostu za pomocą funkcji: ImageTTFText wypisuje tekst na obrazek i zwraca tenże obrazek. Dodatkowo ma możliwość włączenia cache, żeby nie generować za każdym razem.
replacement.js - odpowiada za odnalezienie wszystkich napisów które mają być podmienione (np po tagu, czy klasie css) i podmianę tekstu w nich zawartego na wygenerowane obrazki.

Tutaj zwykle ktoś, kto coś słyszał o pozycjonowaniu się przeraża, bo widzi że tekst się nie zaznacza, czyli, że robot tego nie widzi i będzie źle w wyszukiwarkach... ale wystarczy zaglądnąć w źródło strony, żeby zobaczyć, że nic strasznego się nie stało, a wszystkie teksty są na swoim miejscu - całą zabawa odbywa się dopiero po załadowaniu strony za pomocą javascriptu, co raczej robota nie powinno interesować ;]

Dobra teraz szybko co zrobić żeby zadziałało:
1. w sekcji head dokumentu wstawiamy: <script type="text/JavaScript" src="replacement.js"></script>
2. Domyślnie replacement.js jest napisany tak, że sprawdza najpierw, czy przeglądarka klienta potrafi wyświetlać obrazki (jeśli nie to nie podmienia dla zaoszczędzenia transferu), żeby wykonać to sprawdzenie można wgrać 1-pixelowego png na serwer i podać ścieżkę do niego w 14 linijce. Ja nie widzę większego sensu, żeby to sprawdzać (raczej jak przeglądarka obsługuje JS to da radę wyświetlić obrazek), dlatego w linii 33 zmieniam wartość: var imageLoaded = true; (czyli już sprawdzone).
3. W pliku heading.php w pierwszych linijkach ustawiamy kolor fonta, kolor tła (żeby były ładne krawędzie), rozmiar fonta i oczywiście ścieżkę do pliku z fontem.

I to by było na tyle ;) Działający przykład do pobrania tutaj

Przykłady wykorzystania:
shop.bagastyle.com/
filuteria.pl/

Uwagi:
- polskie znaki w niektórych czcionkach powodują, że napis bywa przesunięty niżej w stosunku do napisu bez polskich znaków np: o kreskę nad "Ś" - można to rozwiązać np dopisując warunek w pliku heading.php, który przesunie w dół teksty bez polskich znaków, albo pobawić się CSSem i wyrównywać obrazki z tekstem do dołu.

Aha i jeszcze jedna rzecz o której zapomniałem wstawianie specjalnych czcionek wymaga jak widać trochę fikołków. Nawet jeśli ktoś powie, że wystarczy wstawić skrypt i już to też nie jest do końca tak, bo nie każdy content jest od razu ładowany na stronie np: treści ładowane ajaxem, albo generowane za pomocą skryptów będą wymagały dogrzebania się odpowiedniego miejsca i dopisania kilku linijek odpalających replacement ponownie... to znowu może w pewnych przypadkach zamulać, albo głupio wyglądać, można coś kombinować z CSSem, ale to znowu moze być potraktowane jako clocking i znowu trzeba coś kombinować... i z powodu głupiej czcionki mamy dużo więcej pracy...
Biorąc pod uwagę powyższe wydaje mi się, że zanim zdecydujemy się na super czcionkę warto przejrzeć listę czcionek, którą kiedyś dawno temu przygotowałem i zastanowić się, czy przypadkiem zastosowanie którejś z nich nie będzie takie straszne.
Na liście jest Helvetica, której nie ma w standardzie w windowsach, ale jak nie ma to system wyświetli ariala, który jest podobny i nic się nie stanie ;) Aha i lista jest według częstotliwości stosowania, którą gdzieś kiedyś znalazłem ;)