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 używa małych liter. Wielkie litery mogą powodować niespodziewane wyniki w 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:Web czcionki CSS
Przykład
Zdefiniuj czcionkę o nazwie "myFirstFont" i określ URL, gdzie można ją znaleźć:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Więcej przykładów TIY można znaleźć na dole 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 |
|
Opcjonalnie. Definiuje, jak font ma być rozciągnięty. Domyślna wartość to "normal". |
| font-style |
|
Opcjonalnie. Definiuje styl czcionki. Domyślna wartość to "normal". |
| font-weight |
|
Opcjonalnie. Definiuje grubość czcionki. Domyślna wartość to "normal". |
| unicode-range | unicode-range | Opcjonalnie. Definiuje zakres Unicode znaków obsługiwanych przez czcionkę. Domyślna wartość to "U+0-10FFFF". |
Więcej przykładów
Przykład
Musisz dodać inną regułę @font-face, która zawiera opis粗体 tekstu:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Plik "sansation_bold.woff" to inny plik czcionki, który zawiera grubą czcionkę Sansation.
Kiedy tekst o rodzinie czcionek "myFirstFont" powinien być wyświetlony jako粗体, przeglądarka użyje go.
W ten sposób można ustawić wiele reguł @font-face dla tej samej czcionki.
Obsługa przeglądarek
Internet Explorer, Firefox, Opera, Chrome i Safari obsługują regułę @font-face.
Numer w tabeli oznacza 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ługiwany | Nieobsługiwany | Nieobsługiwany | 3.2 | Nieobsługiwany |
| EOT | 6.0 | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany |
* Edge i IE: Format czcionki jest skuteczny tylko, gdy jest ustawiony na "installable".
* Firefox: Domyślnie jest wyłączony, ale można go włączyć (potrzebne jest ustawienie flagi na "true", aby używać WOFF2).
