[CSS][JS] Metody dodawania ładnych czcionek na stronę

@font-face

Nie ukrywam, że @font-face jest moim ulubionym sposobem dodawania ładnych czcionek na strony WWW, a to dlatego że opiera się tylko i wyłącznie na CSS i jest obsługiwany przez wszystkie przeglądarki, nawet Internet Explorer 5!.

Implementacja kodu na stronie WWW

Aby móc wykorzystać nową czcionkę na stronie, należy najpierw przygotować odpowiedni zestaw różnych formatów tej samej czcionki. Możemy to zrobić za pomocą tego generatora. Gdy już pobierzemy paczkę z fontami, to pliki z czcionkami nalezy przenieść do jakiegoś łatwo dostępnego katalogu, np.: font, a następnie w pliku CSS, na początku, należy wstawić taki kod:

@font-face {
    font-family: 'Czcionka';
    src: url('font/czcionka-webfont.eot');
    src: url('font/czcionka-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/czcionka-webfont.woff') format('woff'),
         url('font/czcionka-webfont.ttf') format('truetype'),
         url('font/czcionka-webfont.svg#PodkovaRegular') format('svg');
}
body{
	font-family: 'Czcionka';
}

Zalety i wady

Zalety

• szybkie działanie
• brak opóźnień
• korzysta tylko i wyłącznie z CSS
• możliwość wykorzystania wielu różnych czcionek na tej samej stronie

Wady

• potrzeba dołączać kilka różnych formatów czcionek dla różnych przeglądarek
• wygląd tej samej czcionki może się nieznacznie różnić w różnych przeglądarkach

@font-face - Podsumowanie

Jak widać, jest to metoda bardzo przyjazna i łatwa w użyciu. Nie spowalnia przeglądarki, bo to wszystko się dzieje w momencie odczytywania arkusza stylów CSS, w trakcie wczytywania strony. Zupełnie inaczej niż w powyższych przykładach, gdzie czcionki są podmieniane po załadowaniu się strony.
To jest mój faworyt w używaniu ładnych czcionek na stronach. Jeśli tylko ujednolicą renderowanie czcionek w różnych przeglądarkach, to już będę miał jedno z najlepszych narzędzi webmasterskich. Na tą chwilę czcionki najlepiej się renderują w przeglądarce Safari.