La regola CSS @font-face

I font Web consentono ai progettisti Web di utilizzare caratteri non installati sul computer dell'utente.

Una volta trovato/acquistato il carattere che desideri utilizzare, includi semplicemente il file del carattere sul tuo server web e verrà automaticamente scaricato dall'utente quando necessario.

I tuoi caratteri "personali" sono definiti all'interno della regola CSS @font-face.

Diversi formati di carattere

TrueType Fonts (TTF)

TrueType è uno standard di carattere sviluppato alla fine degli anni '80 da Apple e Microsoft. TrueType è il formato di carattere più comune sia per i sistemi operativi Mac OS che per Microsoft Windows.

OpenType Fonts (OTF)

OpenType è un formato per caratteri di computer scalabili. È stato costruito su TrueType ed è un marchio registrato di Microsoft. I caratteri OpenType sono comunemente utilizzati oggi sulle principali piattaforme di computer.

The Web Open Font Format (WOFF)

WOFF è un formato di carattere da utilizzare nelle pagine Web. È stato sviluppato nel 2009 ed è ora una raccomandazione del W3C. WOFF è essenzialmente OpenType o TrueType con compressione e metadati aggiuntivi. L'obiettivo è supportare la distribuzione dei caratteri da un server a un client su una rete con vincoli di larghezza di banda.

The Web Open Font Format (WOFF 2.0)

Carattere TrueType/OpenType che fornisce una compressione migliore rispetto a WOFF 1.0.

SVG Fonts/Shapes

I caratteri SVG consentono di utilizzare SVG come glifi durante la visualizzazione del testo. La specifica SVG 1.1 definisce un modulo di font che consente la creazione di font all'interno di un documento SVG. Puoi anche applicare i CSS ai documenti SVG e la regola @font-face può essere applicata al testo nei documenti SVG.

Embedded OpenType Fonts (EOT)

I caratteri EOT sono una forma compatta di caratteri OpenType progettati da Microsoft per essere utilizzati come caratteri incorporati nelle pagine Web.

Usare il carattere che si desidera

Nella regola @font-face; definire prima un nome per il carattere (ad esempio myFirstFont) e quindi puntare al file del carattere.

Per utilizzare il font per un elemento HTML, fare riferimento al nome del font (myFirstFont) tramite la proprietà font-family:

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

div {
  font-family: myFirstFont;
}

Visualizza esempio

Utilizzo del testo in grassetto

Si deve aggiungere un'altra regola @font-face contenente i descrittori per il testo in grassetto:

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

Visualizza esempio

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

I browser lo utilizzeranno ogni volta che una parte di testo con la famiglia di caratteri "myFirstFont" dovrebbe essere visualizzata in grassetto.

In questo modo puoi avere molte regole @font-face per lo stesso carattere.

Descrittori dei caratteri CSS

La tabella seguente elenca tutti i descrittori di carattere che possono essere definiti all'interno della regola @font-face: