CSS3 Web Fonts - Il @font-face Rule
font web consentono ai progettisti Web di utilizzare i font che non sono installati sul computer dell'utente.
Quando avete trovato / comprato il tipo di carattere che si desidera utilizzare, basta includere il file del font sul server web, e sarà scaricato automaticamente all'utente quando necessario.
I suoi "proprio" font sono definiti all'interno del CSS3 @font-face regola.
Supporto per il browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente la proprietà.
| Proprietà | |||||
|---|---|---|---|---|---|
| @font-face | 4.0 | 9.0 | 3.5 | 3.2 | 10.0 |
Diversi formati di font
TrueType Font (TTF)
TrueType è uno standard di carattere sviluppata alla fine del 1980, da Apple e Microsoft. TrueType è il formato di font più comune per i sistemi operativi Mac OS e Microsoft Windows.
OpenType Font (OTF)
OpenType è un formato per i font scalabili per computer. E 'stato costruito su TrueType , ed è un marchio registrato di Microsoft. OpenType font vengono utilizzati comunemente oggi sulle principali piattaforme di computer.
Il Web Open Font Format (WOFF)
WOFF è un formato per l'utilizzo nelle pagine web font. È stato sviluppato nel 2009, ed è ora una raccomandazione del W3C. WOFF è essenzialmente OpenType o TrueType con la compressione e metadati aggiuntivi. L'obiettivo è quello di sostenere la distribuzione dei caratteri da un server a un client su una rete con i vincoli di larghezza di banda.
Il Web Open Font Format (WOFF 2.0)
TrueType/OpenType tipo di carattere che fornisce una migliore compressione rispetto WOFF 1.0.
SVG Fonts / Forme
font SVG permettono SVG di essere usato come glifi per la visualizzazione del testo. La specifica SVG 1.1 definiscono un modulo tipo di carattere che permette la creazione di font all'interno di un documento SVG. È inoltre possibile applicare i CSS ai documenti SVG, e la @font-face regola può essere applicata al testo in documenti SVG.
Incorporati OpenType Font (EOT)
Caratteri EOT sono una forma compatta di OpenType font disegnati da Microsoft per l'uso come font incorporati nelle pagine Web.
Supporto browser per font formati
I numeri nella tabella specifica la prima versione del browser che supporta pienamente il formato di font.
| formato di 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 | Non supportato | 36.0 | 35.0 * | Non supportato | 26.0 |
| SVG | Non supportato | 4.0 | Non supportato | 3.2 | 9.0 |
| EOT | 6.0 | Non supportato | Non supportato | Non supportato | Non supportato |
* IE: Il formato di font funziona solo quando è impostato per essere "installabili".
* Firefox: Non supportato per impostazione predefinita, ma può essere abilitata (è necessario impostare un flag "vero" da utilizzare per woff2).
Utilizzando il carattere desiderato
Nel CSS3 @font-face regola è innanzitutto necessario definire un nome per il tipo di carattere (ad esempio myFirstFont ), e poi puntare al file di font.
 | Suggerimento: utilizzare sempre le lettere minuscole per l'URL del carattere. Le lettere maiuscole possono dare risultati inaspettati in IE. |
|---|
Per utilizzare il tipo di carattere per un elemento HTML, fare riferimento al nome del font ( myFirstFont ) attraverso il font-family proprietà:
Esempio
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
Prova tu stesso " Utilizzando il testo in grassetto
È necessario aggiungere un altro @font-face regola che contiene i descrittori per il testo in grassetto:
Esempio
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
Prova tu stesso " Il file "sansation_bold.woff" è un altro file di font, che contiene i caratteri in grassetto per il font Sansation.
I browser useranno questo ogni volta che un pezzo di testo con il font-family " myFirstFont " dovrebbe rendere in grassetto.
In questo modo si può avere molti @font-face regole per lo stesso tipo di carattere.
Mettiti alla prova con esercizi!
CSS3 caratteri descrittori
La seguente tabella elenca tutti i descrittori dei font che possono essere definiti all'interno della @font-face regola:
| descrittore | Valori | Descrizione |
|---|---|---|
| font-family | name | Richiesto. Definisce un nome per il carattere |
| src | URL | Richiesto. Definisce l'URL del file di font |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded | Facoltativo. Definisce come il tipo di carattere dovrebbe essere allungato. L'impostazione predefinita è "normale" |
| font-style | normal italic oblique | Facoltativo. Definisce come il tipo di carattere dovrebbe essere designato. L'impostazione predefinita è "normale" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 | Facoltativo. Definisce l'audacia del carattere. L'impostazione predefinita è "normale" |
| unicode-range | unicode-range | Facoltativo. Definisce la gamma di caratteri Unicode del carattere supporta. L'impostazione predefinita è "U + 0-10FFFF" |