Reguła CSS @font-face

Definicja i użycie

Dzięki regule @font-face, projektanci stron internetowych nie muszą już używać żadnych "bezpiecznych" czcionek.

W regule @font-face najpierw musisz zdefiniować nazwę czcionki (np. myFirstFont), a następnie wskazać plik czcionki.

Wskazówka:URL czcionki należy pisać małymi literami. Wielkie litery mogą prowadzić do nieoczekiwanych wyników w przeglądarce IE!

Aby użyć czcionki w elemencie HTML, odwołaj się do nazwy czcionki za pomocą atrybutu font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Zobacz również:

CSS Tutorial:CSS Web Czcionki

Przykład

Definiowanie czcionki o nazwie "myFirstFont" oraz określenie URL, gdzie można ją znaleźć:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Spróbuj sam

Więcej przykładów TIY można znaleźć w dolnej części strony.

Gramatyka CSS

@font-face {
  font-properties
}
Opis czcionki Wartość Opis
font-family name Wymagane. Definiowanie nazwy czcionki.
src URL Wymagane. Definiowanie URL do pobrania czcionki.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Opcjonalnie. Definiuje, jak czcionka powinna być rozciągnięta. Domyślna wartość to "normal".
font-style
  • normal
  • italic
  • oblique
 Opcjonalnie. Definiuje styl czcionki. Domyślna wartość to "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Opcjonalnie. Definiuje grubość czcionki. Domyślna wartość to "normal".
unicode-range unicode-range Opcjonalnie. Definiuje zakres znaków Unicode wspieranych przez czcionkę. Domyślna wartość to "U+0-10FFFF".

Więcej przykładów

Przykład

Musisz dodać kolejną regułę @font-face, która zawiera opis czcionki粗体 tekstu:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Spróbuj sam

Plik "sansation_bold.woff" to inny plik czcionki, który zawiera粗体 znaki czcionki Sansation.

Kiedy tekst, który ma być wyświetlony jako czcionka "myFirstFont", powinien być wyświetlony jako粗体, przeglądarka użyje go.

W ten sposób można ustawić wiele reguł @font-face dla tego samego fontu.

Obsługa przeglądarek

Internet Explorer, Firefox, Opera, Chrome i Safari obsługują regułę @font-face.

Liczby w tabeli oznaczają pierwszą wersję przeglądarki, która obsługuje w pełni format czcionki.

Format czcionki
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG Nieobsługiwane Nieobsługiwane Nieobsługiwane 3.2 Nieobsługiwane
EOT 6.0 Nieobsługiwane Nieobsługiwane Nieobsługiwane Nieobsługiwane

Edge i IE: Format czcionki jest有效 tylko, gdy jest ustawiony na "installable".

Firefox: Domyślnie jest wyłączony, ale można go włączyć (wymaga ustawienia flagi na "true", aby używać WOFF2).