Regola CSS @font-face

  • Pagina precedente
  • Pagina successiva

Definizione e uso

Utilizzando il regolamento @font-face, i designer web non devono più utilizzare nessun tipo di carattere "sicuro".

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

Suggerimento:L'URL del carattere deve essere in minuscolo. Le maiuscole potrebbero causare risultati inaspettati 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:

Lezione CSS:Caratteri Web CSS

Esempio

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

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

Prova a te stesso

Troverai più esempi TIY nella parte inferiore della pagina.

Sintassi CSS

@font-face {
  font-properties
}
Descrittore del carattere Valore Descrizione
font-family name Obbligatorio. Definire il nome del carattere.
src URL Obbligatorio. Definire 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 estendere il carattere. Il valore predefinito è "normal".
font-style
  • normal
  • italic
  • oblique
 Opzionale. Definisci lo stile del carattere. Il valore predefinito è "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Opzionale. Definisci la spessore del carattere. Il valore predefinito è "normal".
unicode-range unicode-range Opzionale. Definisci l'intervallo di Unicode supportato dal carattere. 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 a te stesso

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

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

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

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 dei caratteri.

Formato dei caratteri
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 dei caratteri è valido solo quando impostato su "installable".

* Firefox: di default è disabilitato, ma può essere abilitato (è necessario impostare il flag su "true" per utilizzare WOFF2).

  • Pagina precedente
  • Pagina successiva