La font-variantproprietà consente di modificare il testo mirato in maiuscolo. Questa proprietà è stata estesa in CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Prima di CSS3, questa proprietà accettava uno dei due possibili valori: normal(come il testo viene visualizzato per impostazione predefinita) e small-caps.
Un valore di small-capsrenderà il testo in lettere maiuscole che sono più piccole delle normali lettere maiuscole. Questo non sovrascrive il set di maiuscole nel contenuto, all'interno del markup. Per esempio:
Nella demo sopra, entrambi i paragrafi sono impostati su font-variant: small-caps. Il primo paragrafo ha solo la prima lettera maiuscola nel markup, quindi appare come previsto (prima lettera maiuscola, resto in maiuscolo).
La seconda riga è scritta tutta in maiuscolo nel markup, che sovrascrive il small-capsvalore, impostando tutto in maiuscolo regolare.
Andando oltre, se questi paragrafi sono impostati su font-variant: small-capse text-transform: lowercase, verranno visualizzati in maiuscolo. Allo stesso modo, se questi paragrafi sono impostati su font-variant: small-capse text-transform: uppercase, verranno visualizzati in tutte le maiuscole regolari.
font-variantpuò essere incluso come parte di una fontdichiarazione stenografica.
Nuove aggiunte in CSS3
In CSS3, font-variantdiventa una scorciatoia e può accettare più valori, tra cui all-small-caps, petite-caps, all-petite-caps, titling-caps, e unicase, tra gli altri.
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Lavori | Lavori | Lavori | Lavori | Lavori | Lavori | Lavori |
I nuovi valori aggiunti in CSS3 non supportano il browser, quindi la tabella sopra rappresenta il supporto per un valore di small-caps.
In IE6 / 7, l'impostazione font-variant: small-capsfarà sì che qualsiasi testo impostato su text-transform: uppercaseo text-transform: lowercaseappaia come text-transform: none.