Proprietà CSS font
La proprietà CSS font imposta il font di un elemento. Scopri le proprietà della shorthand font e prova alcuni esempi.
La proprietà font è una proprietà shorthand per le seguenti proprietà:
È possibile impostare tutte le proprietà nel seguente ordine: 1. font-style, 2. font-variant, 3. font-weight, 4. font-stretch, 5. font-size / line-height, 6. font-family. La proprietà line-height viene utilizzata per impostare lo spazio tra le righe.
È obbligatorio definire i valori delle proprietà font-size e font-family. Se uno dei valori viene omesso, viene utilizzato il suo valore predefinito.
Tutti i valori individuali della proprietà shorthand font che non vengono specificati saranno impostati al loro valore iniziale.
| Proprietà | Descrizione |
|---|---|
| Valore iniziale | Valori predefiniti delle proprietà. |
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | Sì. Font-size, font-weight, font-stretch e line-height sono animabili. |
| Versione | CSS1 |
| Sintassi DOM | Object.style.font = "italic normal bold 1em/140% 'Lucida Grande', sans-serif"; |
Font come proprietà shorthand
Quando si utilizza questa proprietà shorthand è importante conoscere alcune cose importanti:
Valori obbligatori
I valori "font-size" e "font-family" sono considerati obbligatori. L'intera dichiarazione verrà ignorata se uno di questi valori è assente.
Valori facoltativi
Gli altri cinque valori sono facoltativi. Nel caso in cui si utilizzi uno di questi valori, tieni presente che devono precedere il valore "font-size" nella dichiarazione, altrimenti verranno ignorati.
Le proprietà font e font-stretch
La proprietà font-stretch è supportata in tutti i browser moderni.
L'ereditarietà per i valori facoltativi
Se si omettono i valori facoltativi, non erediteranno i valori dall'elemento genitore. Verranno ripristinati al loro stato iniziale.
Parole chiave che definiscono i font di sistema
I seguenti valori della proprietà font possono essere utilizzati come parole chiave:
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
Impostano il font a quello utilizzato dal sistema operativo dell'utente per quella specifica categoria. Ad esempio, se si specifica il valore "menu", il font verrà impostato su quell'elemento utilizzando lo stesso font usato dal sistema operativo per i menu a discesa e gli elenchi di menu.
Questi valori-chiave possono essere utilizzati solo con la proprietà shorthand font.
Sintassi
Sintassi della proprietà CSS font
font: font-style font-variant font-weight font-size/line-height font-family | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit;Esempio della proprietà font:
Esempio della proprietà CSS font con le proprietà font-style, font-variant, font-weight, font-size, line-height e font-family
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font {
font: italic normal bold 1em/140% "Lucida Grande", sans-serif;
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p>This is some normal paragraph.</p>
<p class="font">This is a paragraph with specified font value.</p>
</body>
</html>Risultato
Esempio della proprietà font con font in corsivo:
Esempi della proprietà CSS font con le proprietà font-family, font-size, font-variant e font-style
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.font1 {
font: italic small-caps bold 20px/1 cursive;
}
.font2 {
font: italic 1.2em "Fira Sans", serif;
}
.font3 {
font: 1.2em "Fira Sans", sans-serif;
}
.font4 {
font: small-caps bold 28px/1.5 sans-serif;
}
.font5 {
font: caption;
/* font: menu | icon | message-box | small-caption | status-bar;*/
}
</style>
</head>
<body>
<h2>Font property example</h2>
<p class="font1">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font3">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font4">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
<p class="font5">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Esempio della proprietà font, dove font-size, font-weight e line-height sono animabili:
Esempio di animazione font con le proprietà font-size, font-weight, font-stretch e line-height
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.element {
border: 2px solid #666;
width: 350px;
height: 150px;
font: 20px "Fira Sans", sans-serif;
-webkit-animation: element 4s infinite;
animation: element 4s infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes element {
50% {
font: 50px bold;
}
}
/* Standard syntax */
@keyframes element {
50% {
font: 50px bold;
}
}
</style>
</head>
<body>
<h2>Font animation example</h2>
<div class="element">
<p>Some paragraph</p>
</div>
</body>
</html>Valori
| Valore | Descrizione |
|---|---|
| font-style | Definisce lo stile del font. Il suo valore predefinito è normal. |
| font-variant | Definisce la variante del font. Il suo valore predefinito è normal. |
| font-weight | Definisce il peso del font. Il suo valore predefinito è normal. |
| font-size/line-height | Definisce la dimensione del font e l'altezza della riga. Il suo valore predefinito è normal. |
| font-family | Definisce la famiglia del font. Il suo valore predefinito dipende dal browser. |
| caption | Font utilizzato per i controlli con didascalia (ad es., pulsanti, menu a discesa). |
| icon | Font utilizzato per etichettare le icone. |
| menu | Font utilizzato nei menu (ad es., menu a discesa e liste di menu). |
| message-box | Font utilizzato nelle finestre di dialogo. |
| small-caption | Font utilizzato per etichettare i controlli piccoli. |
| status-bar | Font utilizzato nelle barre di stato delle finestre. |
| initial | Imposta la proprietà al suo valore predefinito. |
| inherit | Eredita la proprietà dall'elemento genitore. |