Regola @font-face CSS

Definizione e uso

Utilizzando il regolo @font-face, i designer web non devono più utilizzare alcun carattere "di sicurezza".

Nel regolo @font-face, è necessario definire prima il nome del carattere (ad esempio myFirstFont) e poi puntare al file del carattere.

Suggerimento:L'URL del carattere deve essere in minuscolo. Le lettere maiuscole potrebbero causare risultati imprevisti in IE!

Per utilizzare il carattere in un elemento HTML, fare riferimento al nome del carattere tramite l'attributo font-family (myFirstFont):

div {
  font-family: myFirstFont;
}

Vedi anche:

Tutorial CSS:Web font CSS

Esempio

Specificare un carattere chiamato "myFirstFont" e indicare l'URL da cui è possibile trovarlo:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

Prova personalmente

Troverai più esempi di TIY nella parte inferiore della pagina.

Sintassi CSS

@font-face {
  font-properties
}
Descrittore del carattere Valore Descrizione
font-family name Obbligatorio. Definisci il nome del carattere.
src URL Obbligatorio. Definisci l'URL di scaricamento del carattere.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Opzionale. Definisci come allungare il font. Il valore predefinito è "normal".
font-style
  • normal
  • italic
  • oblique
 Opzionale. Definisci lo stile del font. Il valore predefinito è "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Opzionale. Definisci la spessore del font. Il valore predefinito è "normal".
unicode-range unicode-range Opzionale. Definisci l'intervallo di Unicode supportato dal font. Il valore predefinito è "U+0-10FFFF".

Più esempi

Esempio

Devi aggiungere un'altra regola @font-face che contiene il descrittore del testo in grassetto:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

Prova personalmente

Il file "sansation_bold.woff" è un altro file di font che contiene i caratteri in grassetto del font Sansation.

Ogni volta che un paragrafo di testo con la famiglia di font "myFirstFont" deve essere visualizzato in grassetto, il browser lo utilizza.

In questo modo, puoi impostare più regole @font-face per lo stesso font.

Supporto del browser

Internet Explorer, Firefox, Opera, Chrome e Safari supportano la regola @font-face.

I numeri nella tabella indicano la versione del browser che supporta completamente il formato del font.

Formato del font
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 Non supportato Non supportato Non supportato 3.2 Non supportato
EOT 6.0 Non supportato Non supportato Non supportato Non supportato

* Edge e IE: Il formato del font è valido solo quando impostato su "installable".

* Firefox: Disabilitato per impostazione predefinita, ma può essere abilitato (è necessario impostare il flag su "true" per utilizzare WOFF2).