CO TO JEST FONT-FACE?
Na stronie internetowej nie trzeba używać wyłącznie czcionek: Arial, Times New Roman czy Helvetica. Jeśli znajdziemy w internecie najbardziej wymyślną czcionkę, nie musimy rezygnować z jej użycia. Dzięki css3 mamy możliwość implementacji dowolnej czcionki. Używamy do tego dyrektywy font-face
.
ZALETY FONT-FACE
Czcionka umieszczana jest na serwerze i stamtąd też jest pobierana – przyspiesza to ładowanie czcionek i samej strony. Czcionki są w formacie wektorowym, mogą mieć dowolny rozmiar i zawsze będą dobrze wyglądać. Tę dyrektywę wspierają wszystkie przeglądarki. Należy jednak pamiętać o tym, że na stronach możemy używać tylko tych czcionek, które nie mają zastrzeżonych praw autorskich.
JAK DODAĆ WŁASNĄ CZCIONKĘ NA STRONĘ?
Aby dodać czcionkę na stronę internetową, należy umieścić ją na serwerze (najlepiej w folderze „fonts”). Następnym krokiem jest zdefiniowanie czcionki w pliku css. Przykład kodu znajduje się poniżej.
@font-face {
font-family: 'czcionka';
src: url('nazwaczcionki.otf');
}
W pierwszej linijce trzeba określić nazwę czcionki, której będziemy później używać w pliku css. W drugiej linii określamy ścieżkę do pliku.
W ten sposób, jeżeli chcemy, aby h1 miało dodaną przez nas czcionkę, używamy następującego zapisu: h1{font-family: czcionka;}
.
FONT-FACE, KTÓRE DZIAŁA NA WSZYSTKICH PRZEGLĄDARKACH
Zauważmy, że format czcionki, który został umieszczony w kodzie to ttf. Nie każda przeglądarka wspiera taki format. Aby mieć pewność, że każdy gość będzie widział naszą stronę tak samo, musimy dopisać jeszcze kilka linijek kodu.
@font-face {
font-family: 'czcionka';
src: url('nazwaczcionki.otf'),
url('nazwaczcionki.eot') format('eot'),
url('nazwaczcionki.woff') format('woff'),
url('nazwaczcionki.ttf') format('truetype');
}
Należy umieścić na serwerze więcej rozszerzeń wybranej czcionki.
- ttf jest wspierane przez Safari, Androida i iOs,
- eot przez Interent Explorer,
- ttf/otf przez Safari, Chrome, Opera,
- woff przez Firefox.
Teraz możemy mieć pewność, że każdy internauta zobaczy na naszej stronie odpowiednią czcionkę.