Regola CSS @font-face
Esempio
Specifica un carattere chiamato "myFirstFont" e specifica l'URL in cui può essere trovato:
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Con la @font-face
regola, i web designer non devono più utilizzare uno dei caratteri "sicuri per il web".
Nella @font-face
regola devi prima definire un nome per il font (es. myFirstFont), quindi puntare al file del font.
Per utilizzare il font per un elemento HTML, fare riferimento al nome del font (myFirstFont) tramite la proprietà font-family:
div
{
font-family: myFirstFont;
}
Supporto browser
La @font-face
regola è supportata in Edge, Chrome, Firefox, Safari e Opera.
I numeri nella tabella specificano la prima versione del browser che supporta completamente il formato del carattere.
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 |
*Il formato del carattere funziona solo se impostato su "installabile".
Sintassi
@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" |
Altri esempi
Esempio
Devi aggiungere un'altra regola @font-face contenente descrittori per il testo in grassetto:
@font-face {
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Il file "sansation_bold.woff" è un altro file di font, che contiene i caratteri in grassetto per il font Sansation.
I browser lo useranno ogni volta che un pezzo di testo con la famiglia di caratteri "myFirstFont" dovrebbe essere visualizzato in grassetto.
In questo modo puoi avere molte regole @font-face per lo stesso font.
Pagine correlate
Tutorial CSS: Font Web CSS