A font-variantpropriedade permite que você altere o texto de destino para versalete. Esta propriedade foi estendida no CSS3.
p:first-line ( font-variant: small-caps; /* default is `normal` */ )Antes do CSS3, essa propriedade aceitava um de dois valores possíveis: normal(como o texto é renderizado por padrão) e small-caps.
Um valor de small-capsrenderizará o texto em letras maiúsculas menores do que as letras maiúsculas normais. Isso não substitui as letras maiúsculas definidas no conteúdo, dentro da marcação. Por exemplo:
Na demonstração acima, ambos os parágrafos são definidos como font-variant: small-caps. O primeiro parágrafo tem apenas a primeira letra maiúscula na marcação, por isso aparece como esperado (primeira letra maiúscula, restante em versalete).
A segunda linha é escrita em letras maiúsculas na marcação, o que substitui o small-capsvalor, configurando tudo em letras maiúsculas regulares.
Indo mais longe, se esses parágrafos estiverem definidos como font-variant: small-capse text-transform: lowercase, eles aparecerão em versalete. Da mesma forma, se esses parágrafos forem definidos como font-variant: small-capse text-transform: uppercase, eles aparecerão em letras maiúsculas regulares.
font-variantpode ser incluído como parte de uma fontdeclaração abreviada.
Novas adições em CSS3
Em CSS3, font-varianttorna-se uma forma abreviada e pode aceitar vários valores, incluindo all-small-caps, petite-caps, all-petite-caps, titling-caps, e unicase, entre outros.
Suporte para navegador
| cromada | Safári | Raposa de fogo | Ópera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Funciona | Funciona | Funciona | Funciona | Funciona | Funciona | Funciona |
Os novos valores adicionados em CSS3 não têm suporte de navegador, portanto, a tabela acima representa o suporte para um valor de small-caps.
No IE6 / 7, a configuração font-variant: small-capsfará com que qualquer texto definido como text-transform: uppercaseou text-transform: lowercasepareça text-transform: none.