KATEGORIA:

Font-face

font-face

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ę.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *