Esempio
Specificare un font denominato "myFirstFont" , e specificare l'URL in cui si può trovare:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
} Prova tu stesso " Più "Try it Yourself" esempi di seguito.
Definizione e utilizzo
Con la regola @ font-face, web designer non non devono più utilizzare uno dei "web-safe" font.
Nella nuova regola @ font-face è innanzitutto necessario definire un nome per il tipo di carattere (eg myFirstFont) , e poi puntare al file di font.
Suggerimento: utilizzare le lettere minuscole per l'URL di carattere. Le lettere maiuscole possono dare risultati inaspettati in IE!
Per utilizzare il tipo di carattere per un elemento HTML, fare riferimento al nome del font (myFirstFont) tramite la proprietà font-family:
div
{
font-family: myFirstFont;
}Supporto per il browser
La regola @ font-face è supportato in Internet Explorer, Firefox, Opera, Chrome e Safari.
I numeri nella tabella specifica la prima versione del browser che supporta pienamente il formato di font.
| formato di font | |||||
|---|---|---|---|---|---|
| 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 | Non supportato | 35.0 * | Non supportato | 26.0 |
| SVG | 4.0 | Non supportato | Non supportato | 3.2 | 9.0 |
| EOT | Non supportato | 6.0 | Non supportato | Non supportato | Non supportato |
* Edge e IE: Il formato di font funziona solo quando è impostato per essere "installable" .
* Firefox: disabilitato di default, ma può essere abilitata (è necessario impostare un flag di "true" per usare woff2).
Sintassi
@font-face
{
font-properties
}| descrittore di carattere | Valori | Descrizione |
|---|---|---|
| famiglia di font | name | Necessario. Definisce il nome del font. |
| src | URL | Necessario. Definisce l' URL(s) dove il tipo di carattere deve essere scaricato da |
| font-stretch | normale condensato ultra-condensato Extra-condensato semi-condensato allargato semiespanso Extra-espanso ultra-expanded | Opzionale. Definisce come il tipo di carattere dovrebbe essere allungato. Il valore di default è "normal" |
| stile carattere | normale corsivo obliquo | Opzionale. Definisce come il tipo di carattere dovrebbe essere designato. Il valore di default è "normal" |
| font-weight | normale grassetto 100 200 300 400 500 600 700 800 900 | Opzionale. Definisce l'audacia del carattere. Il valore di default è "normal" |
| unicode-range | unicode-range | Opzionale. Definisce la gamma di caratteri Unicode del carattere supporta. Il valore di default è "U+0-10FFFF" |
Provate voi stessi - Esempi
Esempio
È necessario aggiungere un'altra regola @ font-face che contiene i descrittori per il testo in grassetto:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Prova tu stesso " Il file "sansation_bold.woff" è un altro file di font, che contiene i caratteri in grassetto per il font Sansation.
I browser useranno questo ogni volta che un pezzo di testo con il font-family "myFirstFont" dovrebbe rendere in grassetto.
In questo modo si può avere molte regole @ font-face per lo stesso tipo di carattere.
Pagine correlate
CSS3 tutorial: CSS3 Fonts