Font Web CSS
La regola CSS @font-face
I caratteri Web consentono ai progettisti Web di utilizzare caratteri non installati sul computer dell'utente.
Quando hai trovato/acquistato il font che desideri utilizzare, includi semplicemente il file del font sul tuo server web e verrà scaricato automaticamente all'utente quando necessario.
@font-faceI tuoi "propri" caratteri sono definiti all'interno della regola CSS .
Diversi formati di caratteri
Caratteri TrueType (TTF)
TrueType è uno standard di caratteri sviluppato alla fine degli anni '80 da Apple e Microsoft. TrueType è il formato di carattere più comune per i sistemi operativi Mac OS e Microsoft Windows.
Font OpenType (OTF)
OpenType è un formato per i caratteri scalabili del computer. È stato costruito su TrueType ed è un marchio registrato di Microsoft. I caratteri OpenType sono usati comunemente oggi sulle principali piattaforme di computer.
Il 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.
Il Web Open Font Format (WOFF 2.0)
Font TrueType/OpenType che fornisce una compressione migliore rispetto a WOFF 1.0.
Font/forme SVG
I caratteri SVG consentono di utilizzare SVG come glifi durante la visualizzazione del testo. La specifica SVG 1.1 definisce un modulo font che consente la creazione di font all'interno di un documento SVG. Puoi anche applicare CSS ai documenti SVG e la regola @font-face può essere applicata al testo nei documenti SVG.
Font OpenType (EOT) incorporati
I caratteri EOT sono una forma compatta di caratteri OpenType progettati da Microsoft per l'uso come caratteri incorporati nelle pagine Web.
Supporto del browser per i formati dei caratteri
I numeri nella tabella specificano la prima versione del browser che supporta completamente il formato dei caratteri.
| 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 |
*IE: il formato del carattere funziona solo se impostato su "installabile".
Usando il carattere che desideri
Nella @font-faceregola; definire prima un nome per il font (es. myFirstFont) e poi puntare al file del font.
Suggerimento: usa sempre lettere minuscole per l'URL del carattere. Le lettere maiuscole possono dare risultati imprevisti in IE.
Per utilizzare il font per un elemento HTML, fare riferimento al nome del font (myFirstFont) tramite la font-familyproprietà:
Esempio
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Uso del testo in grassetto
Devi aggiungere un'altra @font-faceregola contenente i descrittori per il testo in grassetto:
Esempio
@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 più @font-faceregole per lo stesso font.
Descrittori di caratteri CSS
La tabella seguente elenca tutti i descrittori di font che possono essere definiti all'interno della @font-faceregola:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| 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 is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |