Przykład
Określ czcionkę o nazwie "myFirstFont" i podać adres URL, gdzie można go znaleźć:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Spróbuj sam " Więcej "Try it Yourself" przykłady poniżej.
Definicja i Wykorzystanie
Z reguły @ font-face, projektanci stron internetowych nie trzeba już korzystać z jednego z "web-safe" czcionek.
W nowej reguły @ font-face należy najpierw zdefiniować nazwę czcionki (eg myFirstFont) , a następnie wskazać plik czcionki.
Wskazówka: Użyj małych liter w adresie URL czcionki. Wielkie litery może dać nieoczekiwane rezultaty w IE!
Aby użyć czcionki dla danego elementu HTML, odnoszą się do nazwy fontu (myFirstFont) za pośrednictwem właściwości font-family:
div
{
font-family: myFirstFont;
}Pomoc Browser
Znaku @ font-face regułą jest obsługiwana w programie Internet Explorer, Firefox, Opera, Chrome i Safari.
Liczby w tabeli określa pierwszą wersję przeglądarki, który w pełni obsługuje format czcionki.
| Format czcionki | |||||
|---|---|---|---|---|---|
| TTF / OTF | 4,0 | 9,0 * | 3,5 | 3,1 | 10,0 |
| WOFF | 5,0 | 9,0 | 3,6 | 5,1 | 11,1 |
| WOFF2 | 36,0 | Nieobsługiwany | 35.0 * | Nieobsługiwany | 26,0 |
| SVG | 4,0 | Nieobsługiwany | Nieobsługiwany | 3,2 | 9,0 |
| EOT | Nieobsługiwany | 6,0 | Nieobsługiwany | Nieobsługiwany | Nieobsługiwany |
* Krawędź i IE: format czcionki działa tylko wtedy, gdy ustawiony jest "installable" .
* Firefox: domyślnie wyłączony, ale może zostać włączony (trzeba ustawić flagę na "true" do korzystania WOFF2).
Składnia
@font-face
{
font-properties
}| deskryptora czcionki | wartości | Opis |
|---|---|---|
| rodzina czcionek | name | Wymagany. Określa nazwę czcionki. |
| src | URL | Wymagany. Określa URL(s) , gdzie czcionka powinna być pobrany ze |
| font-odcinek | normalna skondensowany ultra-skondensowane extra-skondensowane semi-skondensowane rozszerzony semi-rozszerzona ekstra rozszerzona ultra rozszerzona | Opcjonalny. Definiuje jak czcionka powinna być rozciągnięta. Domyślną wartością jest "normal" |
| styl czcionki | normalna italski ukośny | Opcjonalny. Definiuje jak czcionka powinna być stylizowany. Domyślną wartością jest "normal" |
| grubość czcionki | normalna pogrubienie 100 200 300 400 500 600 700 800 900 | Opcjonalny. Definiuje śmiałość czcionki. Domyślną wartością jest "normal" |
| Zakres Unicode | unicode-range | Opcjonalny. Definiuje zakres znaków unicode czcionka obsługuje. Domyślną wartością jest "U+0-10FFFF" |
Spróbuj sam - przykłady
Przykład
Należy dodać kolejne reguły @ font-face zawierającego deskryptory pogrubioną czcionką:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Spróbuj sam " Plik "sansation_bold.woff" to kolejny plik czcionki, która zawiera pogrubienie znaków dla czcionki Sansation.
Przeglądarki użyje tego kiedy fragment tekstu z font-family "myFirstFont" należy uczynić jako pogrubione.
W ten sposób można mieć wiele zasad @ font-face dla tej samej czcionki.
Podobne strony
Tutorial CSS3: CSS3 Czcionki