English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La regola @font-face viene utilizzata per associare il nome del font da utilizzare nel foglio di stile con alcuni font scaricabili, la regola @font-face CSS at-rule specifica un font personalizzato da utilizzare per visualizzare il testo.
Nel caso di uso della famiglia di caratterifont-familyDescrittore per chiamare il font e il descrittore src per associare il nome del font esterno.
La sintassi di questa regola è la seguente:
@font-face: descrizione-font
La regola @font-face contiene una o più dichiarazioni di attributi, come quelle nei CSS convenzionali, dette descrizioni di font. Puoi specificare fino a 24 attributi diversi, ma tutte le loro spiegazioni vanno al di là dell'ambito di questa guida - per ulteriori informazioni, visitaModulo dei font CSS W3Cpagina.
La forma generale della regola @font-face è:
Più tardi, i font possono essere utilizzati come attributo (comefont-familye) i nomifontMa se non supportano i font scaricabili o per qualche motivo non possono caricare i font, deve essere specificato un altro nome di font come riserva.
Il seguente esempio dimostra come utilizzare l'attributo @font-face.
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
body {
font-family: "OpenSans", Arial, sans-serif;
font-size: 1.2em;
}Testa e guarda‹/›Attenzione:Utilizzando la regola @ font-face, non è necessario dipendere dal numero di font installati dall'utente sul computer.
Tramite la configurazione delle regole corrispondenti, quando sono impostate caratteristiche di carattere specifiche come grassetto o corsivo, è anche possibile impostare la selezione di font scaricabili specifici @font-face.
@font-face {
font-family: "OpenSans";
src: url("../fonts/OpenSans-Regular.eot");
src: url("../fonts/OpenSans-Regular.ttf") format("truetype");
}
@font-face {
font-family: "OpenSansBold";
src: url("../fonts/OpenSans-Bold.eot");
src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
}
h1 {
font-family: "OpenSansBold", Arial, sans-serif; /* Specificare il carattere OpenSans bold */
}
p {
font-family: "OpenSans", Arial, sans-serif;
}Testa e guarda‹/›Il significato dei parametri è il seguente:
| Parametro | Valore | Descrizione |
|---|---|---|
| Obbligatorio -I seguenti parametri sono obbligatori. | ||
| font-family | font-family | Definire quelli chefont-familyIl nome del carattere del valore dell'attributo del carattere. |
| src | src | Specificare la posizione del file del carattere da utilizzare. |
| Opzionale -I seguenti parametri sono opzionali. | ||
| font-style | font-style | Validifont-styleValori dell'attributo. |
| font-weight | font-weight | Validifont-weightValore dell'attributo (valori relativi bolder e lighter escluse). |
La compatibilità del browser con l'attributo @font-face, i numeri nella tabella sottostante rappresentano la versione minima del browser che supporta l'attributo; tutti i browser mainstream supportano questa regola.
|
Attenzione:Nei browser, ci sono grandi differenze di supporto per le tecnologie di caratteri specifici. Internet Explorer supporta i tipi di caratteri .eot e .wof, mentre Firefox, Chrome, Safari e Opera supportano .woff, .ttf e .otf.
Si prega di consultare la seguente guida:Caratteri CSS.