CSS @font-face Reguła
Przykład
Określ czcionkę o nazwie „myFirstFont” i określ adres URL, pod którym można ją znaleźć:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Więcej przykładów „Wypróbuj sam” poniżej.
Definicja i użycie
Zgodnie z @font-face
zasadą projektanci stron internetowych nie muszą już używać jednej z „bezpiecznych w sieci” czcionek.
W @font-face
regule należy najpierw zdefiniować nazwę czcionki (np. myFirstFont), a następnie wskazać plik czcionki.
Aby użyć czcionki dla elementu HTML, odwołaj się do nazwy czcionki (myFirstFont) we właściwości font-family:
div
{
font-family: myFirstFont;
}
Obsługa przeglądarki
Reguła @font-face
jest obsługiwana w Edge, Chrome, Firefox, Safari i Opera.
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje format czcionki.
Font format | |||||
---|---|---|---|---|---|
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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
*Format czcionki działa tylko wtedy, gdy jest ustawiony jako „instalowalny”.
Składnia
@font-face
{
font-properties
}
Font descriptor | Values | Description |
---|---|---|
font-family | name | Required. Defines the name of the font. |
src | URL | Required. Defines the URL(s) where the font should be downloaded from |
font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default value is "normal" |
font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default value is "normal" |
font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default value is "normal" |
unicode-range | unicode-range | Optional. Defines the range of unicode characters the font supports. Default value is "U+0-10FFFF" |
Więcej przykładów
Przykład
Musisz dodać kolejną regułę @font-face zawierającą deskryptory dla pogrubionego tekstu:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Plik „sansation_bold.woff” to kolejny plik czcionek, który zawiera pogrubione znaki dla czcionki Sansation.
Przeglądarki będą używać tego, gdy fragment tekstu z rodziną czcionek „myFirstFont” powinien zostać wyświetlony jako pogrubiony.
W ten sposób możesz mieć wiele reguł @font-face dla tej samej czcionki.
Powiązane strony
Samouczek CSS: Czcionki internetowe CSS