Font web CSS

Regola @font-face del CSS

I font web permettono ai designer web di utilizzare font non installati sul computer dell'utente.

Dopo aver trovato/acquistato il font che desideri utilizzare, è sufficiente includere il file del font sul tuo server web; verrà scaricato automaticamente dall'utente quando necessario.

I tuoi font 'proprietari' nel CSS @font-face definiti nelle regole.

Diversi formati di font

Fonte TrueType (TTF)

TrueType è lo standard di carattere sviluppato da Apple e Microsoft alla fine degli anni '80. È il formato di carattere più utilizzato nei sistemi operativi Mac OS e Microsoft Windows.

Fonte OpenType (OTF)

OpenType è un formato di carattere computerizzabile scalabile. Costruito su TrueType ed è un marchio registrato di Microsoft. Oggi, i font OpenType sono utilizzati in modo comune su principali piattaforme di computer.

Formato Open Font Web (WOFF)

Il WOFF è un formato di font per le pagine web. Sviluppato nel 2009, è ora una raccomandazione del W3C. WOFF è essenzialmente un OpenType o TrueType compresso con altri metadati. Lo scopo è supportare la distribuzione di font dal server al client su reti con limitazioni di banda.

Formato Open Font Web (WOFF 2.0)

TrueType/OpenType offrono una migliore compressione rispetto al WOFF 1.0.

Fonte/Shape SVG

I fonti SVG permettono di utilizzare SVG come tratti dei caratteri durante la visualizzazione del testo. La specifica SVG 1.1 definisce un modulo di font che consente di creare font all'interno di documenti SVG. È anche possibile applicare CSS ai documenti SVG, e la regola @font-face può essere applicata al testo nei documenti SVG.

Fonte OpenType Embeddabile (EOT)

Il formato EOT dei caratteri è una forma compressa di OpenType di Microsoft, utilizzata come carattere incorporato nelle pagine web.

Supporto del browser per il formato dei caratteri

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

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

*IE:Il formato del carattere è valido solo quando impostato su "installable".

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

Utilizza il carattere che desideri

All'interno della regola @font-face: prima definisci il nome del carattere (ad esempio myFirstFont) e poi punta al file del carattere.

suggerimento:L'URL del carattere deve sempre essere in minuscolo. Le lettere maiuscole possono produrre risultati inaspettati in IE.

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

esempio

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

Prova a te stesso

Utilizza il testo in grassetto

Devi aggiungere un'altra regola @font-face che contenga i descrittori del testo in grassetto:

esempio

@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 grassetto della famiglia Sansation.

Ogni volta che un paragrafo con la famiglia di caratteri "myFirstFont" deve essere visualizzato in grassetto, il browser lo utilizzerà.

In questo modo, puoi impostare molte @font-face regole.

descrizione dei caratteri CSS

La tabella elenca quelli che possono essere @font-face Tutti i descrittori di carattere (font descriptor) definiti all'interno delle regole:

descrittore valore descrizione
font-family name obbligatorio. Definisci il nome del carattere.
src URL obbligatorio. Definisci l'URL del file di carattere.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 Facoltativo. Definire come allungare la famiglia di font. Il valore predefinito è "normal".
font-style
  • normal
  • italic
  • oblique
 Facoltativo. Definire lo stile della famiglia di font. Il valore predefinito è "normal".
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 Facoltativo. Definire la grassetto della famiglia di font. Il valore predefinito è "normal".
unicode-range unicode-range Facoltativo. Definire l'intervallo di caratteri UNICODE supportati dalla famiglia di font. Il valore predefinito è "U+0-10FFFF".