Proprietà CSS font-style
La proprietà CSS font-style imposta lo stile del carattere per un testo. Sono disponibili tre opzioni: normal, italic e oblique.
La proprietà CSS font-style controlla se il testo viene visualizzato in modo verticale o inclinato. I tre valori parola chiave sono normal, italic e oblique. È il metodo standard per passare un testo a uno stile inclinato senza modificare la famiglia o il peso del carattere.
Questa pagina spiega cosa fa ciascun valore, la differenza pratica tra italic e oblique, l'angolo opzionale che si può passare a oblique e un errore comune quando un font non dispone di un vero carattere corsivo.
Perché l'inclinazione è importante
Il testo inclinato è un segnale visivo che i lettori riconoscono immediatamente: indica enfasi, titoli di opere, frasi straniere o termini tecnici. Usare font-style (anziché, ad esempio, inclinare manualmente il testo) mantiene quel significato codificato in CSS, così rimane corretto attraverso i font, i livelli di zoom e le tecnologie assistive.
Esistono due modi distinti con cui i designer tipografici inclinano una lettera:
- Italic è un design separato, corsivo — le forme delle lettere vengono ridisegnate, non semplicemente inclinate. Una vera
acorsiva spesso appare molto diversa dalla sua versione verticale. - Oblique è il design verticale inclinato meccanicamente di alcuni gradi. Le forme rimangono le stesse; si inclinano soltanto.
Quando si scrive font-style: italic, il browser cerca prima un vero carattere corsivo nella famiglia di font. Se la famiglia non ne include uno, il browser sintetizza un'inclinazione — che è essenzialmente ciò che produrrebbe oblique. Per questo motivo, con molti web font, italic e oblique hanno lo stesso aspetto.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.fontStyle = "oblique"; |
Sintassi
font-style: normal | italic | oblique | initial | inherit;La parola chiave oblique accetta anche un angolo opzionale da -90deg a 90deg, che consente di controllare esattamente di quanto si inclina il testo:
font-style: oblique 14deg;Se si omette l'angolo, i browser utilizzano un'inclinazione predefinita di circa 14deg.
Esempio con il valore normal
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h3.normal {
font-style: normal;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<h3 class="normal">We wrote this text as normal.</h3>
<p>Lorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
</body>
</html>La differenza tra italic e oblique
Come descritto sopra, italic richiede il design corsivo appositamente realizzato dal font, mentre oblique richiede una versione inclinata del design verticale. Quando un font include entrambi i caratteri, i due possono apparire notevolmente diversi; quando ne include solo uno, il browser ricorre alla sintesi dell'altro, quindi hanno lo stesso aspetto. L'esempio seguente mostra entrambi affiancati:
Esempio con i valori italic e oblique
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Esempio con tutti i valori
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h2>Font-style property example</h2>
<p class="normal">We wrote this text as normal.</p>
<p class="italic">We wrote this text as italic.</p>
<p class="oblique">We wrote this text as oblique.</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| normal | Indica che i caratteri del testo saranno normali. Questo è il valore predefinito di questa proprietà. | Prova » |
| italic | Il testo verrà visualizzato in corsivo. | Prova » |
| oblique | Il testo verrà visualizzato in obliquo. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Errore comune: font senza carattere corsivo
Non ogni famiglia di font include un vero corsivo. Quando si applica font-style: italic a tale font, il browser simula l'inclinazione distorcendo i glifi verticali. Il risultato è generalmente accettabile ma appare leggermente meno rifinito rispetto a un corsivo progettato appositamente. Se il corsivo è importante per la tipografia, assicurarsi che il font caricato includa effettivamente un file corsivo (per i font variabili, che l'asse corsivo sia presente) e importare quella variante insieme a quella normale.
Per rimuovere un'inclinazione ereditata da un elemento genitore — ad esempio, per mantenere una parola verticale all'interno di un elemento <em> o <i> — impostare il valore su normal:
em.upright {
font-style: normal;
}Proprietà correlate
font-style è uno degli elementi di una dichiarazione di font. Questi capitoli coprono il resto:
- CSS font-weight — controlla il grassetto, l'altro segnale di enfasi comune.
- CSS font-family — sceglie il carattere tipografico, che determina se esiste un vero corsivo.
- CSS font-size — imposta la dimensione del testo.
- CSS font — la forma abbreviata che imposta
font-style,font-weight,font-sizee altro in una sola volta. - CSS text-decoration — un altro modo per marcare il testo, con sottolineature e linee.