CSS3 fonturi web - Cu privire la @font-face de regulă
fonturi web permit designerilor web să utilizeze fonturi care nu sunt instalate pe calculatorul utilizatorului.
Când ați găsit / cumparat fontul pe care doriți să o utilizați, includ doar fișierul de font de pe serverul web, și va fi descărcat automat pentru utilizator atunci când este necesar.
Dvs. "own" fonturi sunt definite în cadrul CSS3 @font-face regula.
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
| Proprietate | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Formate de fonturi diferite
TrueType Fonturi (TTF)
TrueType este un font standard dezvoltat la sfârșitul anilor 1980, de Apple și Microsoft. TrueType este cel mai comun format de font pentru sistemele de operare atât pentru Mac OS și Microsoft Windows.
OpenType Fonturi (OTF)
OpenType este un format pentru fonturi scalabile de calculator. A fost construit pe TrueType , și este o marcă înregistrată a Microsoft. OpenType fonturi sunt utilizate în mod obișnuit astăzi pe platformele majore de calculator.
Web Open Font Format (WOFF)
WOFF este un format de font pentru a fi utilizat în paginile web. Acesta a fost dezvoltat în anul 2009, iar acum este o recomandare W3C. WOFF este în esență OpenType sau TrueType cu compresie și metadate suplimentare. Scopul este de a sprijini distribuția de fonturi de pe un server de la un client printr-o rețea cu constrângeri de lățime de bandă.
Web Open Font Format (WOFF 2.0)
TrueType/OpenType font care oferă o compresie mai bună decât WOFF 1.0.
SVG Fonturi / Forme
fonturi SVG SVG permit să fie utilizat ca glifele la afișarea textului. SVG 1.1 caietul de sarcini definesc un modul de fonturi, care permite crearea de fonturi într-un document SVG. Puteți aplica , de asemenea , CSS documentelor SVG, iar @font-face regula pot fi aplicate la text în documente SVG.
Embedded OpenType Fonturi (EOT)
Fonturi EOT sunt o formă compactă de OpenType fonturi proiectate de Microsoft pentru a fi utilizate ca fonturi încorporate pe pagini web.
Suport Browser pentru formatele de fonturi
Numerele din tabel specifică prima versiune de browser care acceptă pe deplin formatul fontului.
| format Font | |||||
|---|---|---|---|---|---|
| TTF/OTF | 9.0 * | 4 | 3.5 | 3.1 | 10.0 |
| WOFF | 9 | 5 | 3.6 | 5.1 | 11.1 |
| WOFF2 | Nu sunt acceptate | 36,0 | 35.0 * | Nu sunt acceptate | 26.0 |
| SVG | Nu sunt acceptate | 4 | Nu sunt acceptate | 3.2 | 9 |
| EOT | 6 | Nu sunt acceptate | Nu sunt acceptate | Nu sunt acceptate | Nu sunt acceptate |
* IE: Formatul de fonturi funcționează numai atunci când este setat pentru a fi "installable" .
* Firefox: Nu este acceptat în mod implicit, dar poate fi activată (trebuie să stabilească un steag la "true" pentru a utiliza WOFF2).
Utilizarea fontul Vrei
În CSS3 @font-face regula 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 întotdeauna litere mici pentru URL - ul de fonturi. Majuscule poate da rezultate neașteptate în IE.
Pentru a utiliza fontul pentru un element HTML, se referă la numele fontului ( myFirstFont ) prin intermediul font-family proprietate:
Exemplu
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Încearcă - l singur » Utilizarea Bold Text
Trebuie să adăugați un alt @font-face regulă care conține descriptori pentru text cu litere aldine:
Exemplu
@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 @font-face reguli pentru același font.
Testați-te cu exerciții!
CSS3 Descriptori Font
Tabelul de mai jos listează toate descriptorii de fonturi care pot fi definite în interiorul @font-face regula:
| descriptor | valori | Descriere |
|---|---|---|
| font-family | name | Necesar. Definește un nume pentru font |
| src | URL | Necesar. Definește URL-ul fișierului de font |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Opțional. Definește modul în care ar trebui să fie întins fontul. Implicit este "normal" |
| font-style | normal italic oblique | Opțional. Definește modul în care ar trebui să fie stilizat fontul. Implicit este "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Opțional. Definește îndrăzneala a fontului. Implicit este "normal" |
| unicode-range | unicode-range | Opțional. Definește intervalul de caractere UNICODE fontului acceptă. Implicit este "U+0-10FFFF" |