Propriedade Font Variant
Última atualização: 2026-09-13
font-variant Propriedade Font Variant
A propriedade CSS font-variant aplica efeitos de variante de fonte, como small-caps, que renderiza letras minúsculas como letras maiúsculas de tamanho reduzido. O valor small-caps é o recurso mais amplamente suportado.
| Categoria | |
|---|---|
| Valor Inicial | normal |
| Herdado | Sim |
| Aplica-se A | all |
| Tipo de Animação | discrete |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
font-variant: normal | small-caps;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
normal | small-caps | Palavra-chave | Variante de fonte (letras maiúsculas pequenas) |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font-variant | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： O small-caps mantém o tamanho das letras maiúsculas existentes e converte apenas as minúsculas em maiúsculas pequenas, o que combina com títulos em inglês.
❓ Perguntas Frequentes
QO valor small-caps do font-variant funciona com texto em chinês?
AO small-caps renderiza letras minúsculas como letras maiúsculas pequenas; o chinês não tem conceito de caixa (maiúsculas/minúsculas), então os caracteres Hanzi não são afetados, embora quaisquer letras latinas no parágrafo sejam alteradas. Se o texto já estiver todo em maiúsculas, o small-caps deixa o tamanho inalterado.
QQual é a diferença entre font-variant: small-caps e text-transform: uppercase?
Auppercase converte cada letra em maiúsculas regulares cuja altura corresponde à dos algarismos; small-caps usa glifos de maiúsculas em tamanho reduzido que preservam a altura relativa das letras minúsculas originais, conferindo uma aparência mais elegante adequada a títulos e siglas em inglês.
QO que a propriedade shorthand font-variant pode fazer no CSS moderno?
AO CSS3 expandiu font-variant para uma shorthand que controla ligaturas (font-variant-ligatures), formas numéricas (font-variant-numeric) e mais. Por exemplo, font-variant-numeric: tabular-nums faz com que os dígitos tenham a mesma largura para alinhamento em tabelas e listas de preços.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
