kminek.pl | HTML, PHP, CSS, JavaScript, WordPress, kursy, skrypty, blog

Jednym z najbardziej irytujących elementów przy projektowaniu stron WWW była praktycznie od zawsze konieczność stosowania ograniczonego zestawu najpopularniejszych (czytaj: najczęściej zainstalowanych na komputerach internautów) czcionek. Oczywiście – Arial, Verdana, Times New Roman czy Courier to piękne fonty, które stanowią fundament internetowej typografii. Są jednak przypadki, kiedy standardowe czcionki po prostu nie wystarczają – bo np. nie pasują do unikalnej koncepcji graficznej serwisu.

W takich sytuacjach rodzi się potrzeba skorzystania z niestandardowej czcionki. Dotychczas problem ten „naokoło” próbowały rozwiązać techniki takie jak sIFR, FLIR czy ostatnio typeface.js jednak wymagały one dosyć sporego wysiłku konfiguracyjnego i posiadały ograniczenia. Okazuje się jednak, że już w tej chwili prawie wszystkie najpopularniejsze przeglądarki internetowe obsługują dużo elastyczniejszy i wygodniejszy mechanizm osadzania niestandardowych czcionek.

Web Fonts i Internet Explorer

Mechanizm Web Fonts – bo o nim właśnie mowa – został nakreślony w specyfikacji CSS i co ciekawe po raz pierwszy zaimplementowano go już w 1997 w Internet Explorerze (!). Zasadniczo osadzenie niestandardowej czcionki w dokumencie sprowadza się do dodania następującej deklaracji CSS:

@font-face {
 font-family: nowaczcionka;
 src: url(http://jakasstrona.pl/nowaczcionka.otf); /* lub ścieżka relatywna */
}

Z tak osadzonej czcionki korzystamy dalej w tradycyjny sposób:

h1 {
 font-family: nowaczcionka, Arial, Sans-serif;
}

Niestety IE zezwala na osadzanie czcionek tylko i wyłącznie w formacie .eot (Embedded Open Type). Format ten został opracowany przez Microsoft i przez lata był formatem zamkniętym. Dopiero niedawno upubliczniono go i przesłano do W3C jako propozycja oficjalnego standardu dla Web Fonts. Microsoft i środowiska twórców komercyjnych czcionek aktywnie promują .eot jako standard, który najlepiej chroni prawa autorskie. Zasada jest prosta – jeśli zaszyta w pliku .ttf lub .otf licencja na to nie pozwala, nie uda nam się wygenerować pliku .eot dla takiej czcionki. Dodatkowo pliki .eot powiązane są z konkretną domeną (określamy ją w momencie generowania pliku) i po prostu nie będą działać w innej lokalizacji.

W chwili obecnej jedynym narzędziem do generowania plików .eot jest Microsoft WEFT (Web Embedding Fonts Tool), niemniej jednak w najbliższej przyszłości powinny pojawić się kolejne narzędzia z racji otwarcia formatu (jest bardzo prawdopodobne, że obsługa automatycznej generacji plików .eot zostanie wbudowana w systemy CMS czy edytory stron WWW).

Jako to czasem w przypadku produktów Microsoftu bywa, stosunkowo prosta operacja konwersji czcionki do formatu .eot została w przypadku WEFT ubrana w koszmarny kreator, który z powodzeniem utrudnia to zadanie. Dlatego poniżej prezentuję krótki opis, który pozwoli bezboleśnie i szybko wygenerować plik .eot. Format .eot ma taką sprytną właściwość, że może zawierać całą czcionkę lub tylko faktycznie używane na powiązanej stronie znaki (jego rozmiar jest wtedy mniejszy). Jeśli jednak strona budowana jest dynamicznie (blog, CMS) lepiej wygenerować plik .eot dla całej domeny i zawierający całą czcionkę.

Po uruchomieniu WEFT buduje bazę danych fontów analizując nasz system (ten proces powtarzany jest także w przyszłości, gdy dodamy lub usuniemy jakiś font z systemu). Odpalamy kreatora (File > New…), który składa się z 6 kroków:

1. Enter your name and e-mail address: wypełniamy imię i adres e-mail
2. Build a list of your Web pages: zaznaczamy opcję Do not add linked pages, wpisujemy pełny adres naszej strony (np. http://www.kminek.pl/) i klikamy przycisk Add
3. Analyze the usage of fonts in your Web pages: zaznaczamy opcję Skip analysis i przechodzimy do następnego kroku
4. Choose which fonts to embed: wybieramy opcję No subsetting (czyli osadź cała czcionkę), klikamy przycisk Add i wybieramy czcionkę, którą chcemy przekonwertować – po dodaniu powinna pojawić się na liście z zielonym ptaszkiem (czcionki, których nie da się przekonwertować oznaczane są czerwonym krzyżykiem)
5. Create font objects and modify your pages: w polu Enter the location where the font objects will be created wybieramy file:// i wskazujemy lokalny folder na dysku twardym, w którym zapisany zostanie plik .eot. W tym miejscu możemy właściwie zakończyć działanie kreatora i ręcznie wgrać font na serwer. Później pozostaje już tylko jego podlinkowanie za pomocą deklaracji CSS, o której była mowa wcześniej.

Web Fonts i reszta świata

Format .eot lansowany przez Microsoft i wspierany przez producentów komercyjnych czcionek nie przypadł do gustu developerom Apple, którzy w silniku przeglądarki Safari 3 zaimplementowali możliwość osadzania na stronach czcionek w formatach .ttf i .otf. Filozofia takiego postępowania była prosta: pozwólmy ludziom na wygodne osadzanie niestandardowych czcionek w najpopularniejszych formatach i pozostawmy do nich ocenę, czy swoim postępowaniem łamią prawa autorskie. Taki punkt widzenia przyjęła również Mozilla (Firefox 3.1 będzie pierwszym liskiem obsługującym osadzanie czcionek) i Opera (developerzy zapowiedzieli, że Web Fonts pojawią się w dziesiątej wersji tej przeglądarki).

Czcionki w wymienionych powyżej przeglądarkach osadzamy za pomocą identycznej deklaracji CSS, z tym że linkujemy do pliku .ttf lub .otf:

@font-face {
 font-family: nowaczcionka;
 src: url(http://jakasstrona.pl/nowaczcionka.ttf); /* lub ścieżka relatywna */
}

Działanie mechanizmu osadzającego można obejrzeć tutaj.

Konkluzja

Jak widać, Web Fonts to kolejny temat, w którym zmagać się będzie trzeba z różnym podejściem producentów przeglądarek. Oczywiście nie jest to jakiś większy problem – wystarczy deklarację osadzającą czcionkę w formacie .eot ująć w komentarz warunkowy akceptowany tylko przez IE.

Należy także zauważyć, że podczas wizyty na stronie z osadzoną niestandardową czcionką (niezależnie od tego czy jest ona w formacie .ttf, .otf lub .eot) jest ona pobierana i wykorzystywana lokalnie TYLKO przez przeglądarkę i NIE JEST instalowana w systemie (tzn. nie będzie dostępna w innych aplikacjach np. w edytorze tekstu). Dodatkowo, tak jak w przypadku wywołań AJAX-owych, przeglądarka nie może pobierać czcionek z innych domen.

Przełom w internetowej typografii dokonuje się na naszych oczach. Zmierzch dotychczasowych metod osadzania niestandardowych czcionek jest bardzo bliski. Wydaje mi się, że w ciągu roku lub dwóch lat osadzanie czcionek w dokumentach HTML za pomocą deklaracji @font-face będzie czymś na porządku dziennym.