Exemplu
Specificați un font numit "myFirstFont" , și specificați adresa URL unde poate fi găsit:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Cu regula @ font-face, web designeri nu nu mai trebuie să utilizeze una dintre "web-safe" fonturi.
În noua regula @ font-face trebuie să definiți mai întâi un nume pentru font (eg myFirstFont) de (eg myFirstFont) , (eg myFirstFont) , apoi indicați spre fișierul de font.
Sfat: Folosiți litere mici pentru URL - ul de font. Majuscule poate da rezultate neașteptate în IE!
Pentru a utiliza fontul pentru un element HTML, se referă la numele fontului (myFirstFont) prin proprietatea font-family:
div
{
font-family: myFirstFont;
}Suport pentru browser-
Regula de @ font-face este acceptată în Internet Explorer, Firefox, Opera, Chrome și Safari.
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin formatul fontului.
| format Font | |||||
|---|---|---|---|---|---|
| TET / OTF | 4 | 9.0 * | 3.5 | 3.1 | 10.0 |
| WOFF | 5 | 9 | 3.6 | 5.1 | 11.1 |
| WOFF2 | 36,0 | Nu sunt acceptate | 35.0 * | Nu sunt acceptate | 26.0 |
| SVG | 4 | Nu sunt acceptate | Nu sunt acceptate | 3.2 | 9 |
| EOT | Nu sunt acceptate | 6 | Nu sunt acceptate | Nu sunt acceptate | Nu sunt acceptate |
* Edge și IE: Formatul de fonturi funcționează numai atunci când este setat pentru a fi "installable" .
* Firefox: Dezactivat implicit, dar poate fi activată (trebuie să stabilească un steag la "true" pentru a utiliza WOFF2).
Sintaxă
@font-face
{
descriptor Font valori Descriere familie de fonturi name Necesar. Definește numele fontului. src URL Necesar. Definește URL(s) - URL(s) în cazul în care fontul trebuie să fie descărcat de font-stretch normal
condensat
ultra-condensat
extra-condensat
semi-condensat
extins
semi-expandat
extra-extins
ultra-extins Opțional. Definește modul în care ar trebui să fie întins fontul. Valoarea implicită este "normal" stilul fontului normal
cursiv
oblic Opțional. Definește modul în care ar trebui să fie stilizat fontul. Valoarea implicită este "normal" font-greutate normal
îndrăzneţ
100
200
300
400
500
600
700
800
900 Opțional. Definește îndrăzneala a fontului. Valoarea implicită este "normal" unicode-range unicode-range Opțional. Definește intervalul de caractere Unicode fontului acceptă. Valoarea implicită este "U+0-10FFFF"
Încearcă-l singur - Exemple
Exemplu
Trebuie să adăugați o altă regulă @ font-face ce conține descriptori pentru text cu litere aldine:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Încearcă - l singur » Fișierul "sansation_bold.woff" este un alt font fișier, care conține caractere aldine pentru fontul Sansation.
Browserele vor folosi această ori de câte ori o bucată de text cu font-family "myFirstFont" ar trebui să facă caractere aldine.
În acest fel puteți avea mai multe reguli @ font-face pentru același font.
Pagini similare
Tutorial CSS3: CSS3 Fonturi