Proprietà CSS font-variant-caps
La proprietà CSS font-variant-caps consente di selezionare glifi alternativi per maiuscolette, caratteri ridotti e titling. Scopri i valori con esempi.
La proprietà CSS font-variant-caps controlla l'uso di glifi alternativi per le lettere maiuscole, come le maiuscolette, le maiuscolette ridotte e i caratteri titling. In CSS1 e CSS2 questi venivano selezionati tramite la proprietà più generale font-variant; in CSS3, font-variant è diventata una proprietà abbreviata e font-variant-caps è stata estratta come proprietà longhand indipendente.
Questa pagina illustra cosa fa ciascun valore, quando utilizzarlo, la differenza tra font-variant-caps e text-transform, e la limitazione OpenType che determina se vengono visualizzate vere maiuscolette o un'approssimazione sintetizzata.
I valori disponibili sono:
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps
Quando un font include glifi per lettere maiuscole di dimensioni diverse, font-variant-caps seleziona quelli più adatti. Se un font non dispone di glifi dedicati per le maiuscolette, il browser le sintetizza ridimensionando i glifi maiuscoli ordinari — l'effetto funziona sempre, ma il risultato sintetizzato è meno raffinato rispetto a un vero carattere maiuscoletto disegnato appositamente.
Il rendering effettivo dipende quindi dal supporto delle funzionalità OpenType del font.
Perché usare font-variant-caps
Le maiuscolette sono una convenzione tipografica, non solo un espediente stilistico. Utilizza font-variant-caps quando vuoi:
- Acronimi e abbreviazioni (NASA, HTML, PDF) che si integrino visivamente con il peso del testo minuscolo circostante, anziché spiccarecon maiuscole a tutta altezza.
- Sottotitoli, byline o la riga iniziale di un articolo che risultino distinti senza modificare la dimensione o il peso del font.
- Testo legale o intestazioni correnti dove un colore uniforme e raffinato lungo la riga è importante.
A differenza di text-transform: uppercase, font-variant-caps non modifica il testo sottostante — i lettori di schermo leggono ancora il testo con la maiuscolizzazione originale, e il risultato utilizza glifi appositamente progettati anziché maiuscole ingrandite. Preferisci font-variant-caps quando l'obiettivo è lo stile tipografico su testo già correttamente maiuscolizzato.
| Valore iniziale | normal |
|---|---|
| Si applica a | Tutti gli elementi. Si applica anche a ::first-letter e ::first-line. |
| Ereditato | Sì. |
| Animabile | No. |
| Versione | CSS3 |
| Sintassi DOM | object.style.fontVariantCaps = "petite-caps"; |
Sintassi
Sintassi della proprietà CSS font-variant-caps
font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;Esempio della proprietà font-variant-caps:
Esempio della proprietà CSS font-variant-caps con i valori all-small-caps, small-caps e normal
<!DOCTYPE html>
<html>
<head>
<title>The title of the document </title>
<style>
.all-small-caps {
font-variant-caps: all-small-caps;
}
.small-caps {
font-variant-caps: small-caps;
}
.normal {
font-variant-caps: normal;
}
</style>
</head>
<body>
<h2>Font-variant-caps property example</h2>
<p class="all-small-caps">
The font-variant-caps CSS property controls the use of alternate glyphs for capital letters.
</p>
<p class="small-caps">Small caps!</p>
<p class="normal">Normal caps!</p>
</body>
</html>Risultato
![Proprietà CSS font-variant-caps](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "Rendering della proprietà CSS font-variant-caps con small-caps, all-small-caps e testo normale" =420x)
font-variant-caps vs. text-transform
È facile confondere font-variant-caps: small-caps con text-transform: uppercase. Sembrano simili ma si comportano in modo diverso:
<!DOCTYPE html>
<html>
<head>
<title>small-caps vs. uppercase</title>
<style>
.smallcaps {
font-variant-caps: small-caps;
}
.upper {
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="smallcaps">The agency known as nasa.</p>
<p class="upper">The agency known as nasa.</p>
</body>
</html>Nel primo paragrafo, le lettere minuscole vengono visualizzate come maiuscolette mentre il testo minuscolo originale viene preservato (un lettore di schermo legge ancora "nasa"). Nel secondo, ogni lettera viene forzata a maiuscola a tutta altezza e il testo visualizzato recita "THE AGENCY KNOWN AS NASA". Usa font-variant-caps per la raffinatezza tipografica e text-transform quando hai effettivamente bisogno di modificare la maiuscolizzazione.
Valori
| Valore | Descrizione |
|---|---|
| normal | L'uso di glifi alternativi non è attivato. |
| small-caps | Visualizza le maiuscolette. I glifi small-caps usano la forma delle lettere maiuscole, ma sono ridotti alle dimensioni delle lettere minuscole. |
| all-small-caps | Visualizza le maiuscolette sia per le lettere maiuscole che minuscole. |
| petite-caps | Visualizza le maiuscolette ridotte. |
| all-petite-caps | Visualizza le maiuscolette ridotte sia per le lettere maiuscole che minuscole. |
| unicase | Visualizza una combinazione di maiuscolette per le lettere maiuscole e lettere minuscole normali. |
| titling-caps | Visualizza i caratteri titling. |
Nota: initial e inherit sono parole chiave CSS generali e possono essere utilizzate con qualsiasi proprietà CSS.
Compatibilità con i browser
| Browser | Supporto |
|---|---|
| Chrome | 48+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 9.1+ |
| Opera | 35+ |
Nota: font-variant-caps fa parte della proprietà abbreviata font-variant. Quando si usa la forma abbreviata, includi esplicitamente font-variant-caps per preservarne il valore, poiché altri valori della forma abbreviata potrebbero sovrascriverlo.
Proprietà correlate
font-variant-caps è una delle diverse proprietà longhand controllate dalla forma abbreviata font-variant. Le proprietà correlate consentono di ottimizzare altre funzionalità OpenType:
font-variant-legatures— controlla le legature comuni, discrezionali e storiche.font-variant-numeric— scegli tra cifre allineate/in stile antico, frazioni e ordinali.font-variant-alternates— seleziona gli stili alternativi e i caratteri alternativi forniti da un font.font-feature-settings— la valvola di sfogo di basso livello per qualsiasi funzionalità OpenType tramite il suo tag a quattro caratteri.text-transform— modifica la maiuscolizzazione effettiva del testo.