Czasami zdarza się, że zaawansowany projekt graficzny strony wymaga użycia niestandardowego kroju czcionek, który dodatkowo na stronie musi być wyświetlany jako tekst. W takich przypadkach wykluczone jest zastąpienie tego tekstu przez adekwatny element graficzny. Jedynym sensownym rozwiązaniem jest wskazanie przeglądarce użytkownika pliku z fontami.
W pliku css możliwe jest to za pomocą @fotn-face. W przypadku większości przeglądarek wystarczający jest plik TTF, niestety Internet Explorer jest tu wyjątkiem wymagającym specjalnego traktowania. Od wersji 6 do wersji 8 operacja ta obsługiwana jest za pomocą pliku z EOT (Embedded OpenType).
Dosyć dużym problemem jest wygenerowanie prawidłowo działającego pliku EOT. Teoretycznie pomoc powinno stanowić narzędzie WEFT dostarczane przez Microsoft. Niestety program ten jest bardzo stary i w większości wypadków mówiąc delikatnie działa mało zadowalająco (bardzo często zawiesza się oraz wypuszcza nieprawidłowe pliki). Obecnie jedynym w pełni działającym narzędziem (jakie znalazłem) umożliwiającym utworzenie sprawnego pliku EOT jest konwerter online dostępny pod wskazanym adresem:
http://www.kirsle.net/wizards/ttf2eot.cgi
IE9 wnosi kolejną zmianę do obsługi ładowanych czcionek. W tej wersji przeglądarki obsługa opiera się na nowym formacie plików WOFF (Web Open Font Format) opracowanym przez W3C. Najprawdopodobniej w przyszłości będzie to ogólny standard przyjęty przez wszystkie popularne przeglądarki.
Stosowanie @font-face w pliku CSS, wymaga bardzo starannej deklaracji, szczególnie istotna jest kolejność formatów plików. Poniżej znajdziecie prawidłową kolejność, która powinna działać poprawnie na wszystkich popularnych przeglądarkach (również mobilnych):
@font-face {
font-family: ‚MyWebFont';
src: url(‚/katalog/nazwaPliku.eot’);
src: url(‚/katalog/nazwaPliku.eot?#iefix’) format(‚embedded-opentype’),
url(‚/katalog/nazwaPliku.woff’) format(‚woff’),
url(‚/katalog/nazwaPliku.TTF’) format(‚truetype’)
font-weight: normal;
font-style: normal;
}
Znaczniki: css, html, programowanie