Proprietà CSS font-variant
La proprietà CSS font-variant consente di impostare il testo come normale o small-caps. Prova esempi della proprietà font-variant!
La proprietà CSS font-variant controlla l'uso di glifi alternativi in un font — più comunemente i small caps. I small caps rendono le lettere minuscole come lettere maiuscole disegnate approssimativamente all'altezza delle originali lettere minuscole, conferendo a titoli, abbreviazioni e acronimi un aspetto raffinato e uniforme senza urlare con le maiuscole complete.
Nella sua forma classica (CSS 1), font-variant accetta uno di due valori: normal (il valore predefinito) o small-caps. Con small-caps, le lettere minuscole vengono convertite in glifi maiuscoli visualizzati leggermente più piccoli delle normali lettere maiuscole, mentre le lettere già maiuscole mantengono la loro dimensione normale.
Quando usarla
font-variant: small-caps è utile quando si desidera un'enfasi che risulti elegante anziché invadente:
- Acronimi e abbreviazioni nel testo corrente (es. "html", "css") in modo che non dominino la riga con le maiuscole a piena altezza.
- Stile drop-cap o lead-in sulla prima riga di un articolo, spesso combinato con ::first-line.
- Intestazioni, sottotitoli e didascalie di figure in layout editoriali o in stile stampa.
Poiché il valore è ereditato, impostarlo su un contenitore lo applica a tutto il testo discendente a meno che un elemento figlio non lo sovrascriva.
La proprietà font-variant può anche essere impostata come parte di una dichiarazione abbreviata font, insieme a font-style, font-weight, font-size e font-family.
Nel CSS Fonts Module Level 4, font-variant è diventata una shorthand per una famiglia di proprietà longhand: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures e font-variant-east-asian. Ciò le consente di accettare molti più valori (come all-small-caps, petite-caps, oldstyle-nums e slashed-zero). I valori classici normal e small-caps funzionano ovunque; il supporto per i valori più recenti dipende sia dal browser che dal fatto che il font scelto contenga effettivamente quei glifi.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditata | Sì. |
| Animabile | No. |
| Versione | CSS1 |
| Sintassi DOM | object.style.fontVariant = "normal"; <br>(Nota: fontVariant è il nome della proprietà JavaScript in camelCase per font-variant.) |
Sintassi
Sintassi della proprietà CSS font-variant
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Esempio della proprietà font-variant:
Esempio della proprietà CSS font-variant con small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Risultato
Un secondo esempio: all-small-caps
Il valore all-small-caps (dalla shorthand Level 4) rende ogni lettera come small caps, incluse quelle già maiuscole — utile per le intestazioni in cui si desidera un aspetto uniforme in small-caps.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>Con small-caps, le lettere maiuscole in "The", "Quick", "Brown" e "Fox" mantengono la piena altezza; con all-small-caps, vengono ridotte all'altezza dei small-caps anch'esse.
Valori
| Valore | Descrizione | Prova |
|---|---|---|
| normal | I caratteri del testo sono resi normalmente. Questo è il valore predefinito. | Prova » |
| small-caps | Converte le lettere minuscole in glifi maiuscoli visualizzati a dimensioni ridotte; le maiuscole esistenti mantengono la loro dimensione completa. | Prova » |
| all-small-caps | Converte sia le lettere minuscole che maiuscole in small-caps (Level 4). | Prova » |
| petite-caps | Come small-caps ma usando glifi petite-caps, quando il font li fornisce (Level 4). | Prova » |
| initial | Imposta la proprietà al suo valore predefinito (normal). | Prova » |
| inherit | Eredita il valore della proprietà dall'elemento genitore. |
Proprietà correlate
- font — la shorthand che può includere
font-variant. - font-style — testo normale, corsivo o obliquo.
- font-weight — grassetto del testo.
- text-transform — forza
uppercase/lowercase/capitalize(cambia i caratteri, a differenza di small-caps che cambia solo la forma dei glifi). - letter-spacing — si abbina bene con i small caps per migliorare la leggibilità degli acronimi.