Propriedade CSS font-variant-caps
A propriedade CSS font-variant-caps permite selecionar glifos alternativos para versaletes e letras maiúsculas de título. Veja os valores e exemplos.
A propriedade CSS font-variant-caps controla o uso de glifos alternativos para letras maiúsculas, como versaletes (small caps), versaletes menores (petite caps) e letras de título (titling caps). No CSS1 e CSS2, esses estilos eram selecionados pela propriedade mais abrangente font-variant; no CSS3, font-variant tornou-se uma forma abreviada e font-variant-caps foi separada como sua própria forma detalhada.
Esta página aborda o que cada valor faz, quando utilizá-lo, a diferença entre font-variant-caps e text-transform, e a ressalva sobre OpenType que determina se você verá versaletes verdadeiros ou um substituto gerado.
Os valores disponíveis são:
normalsmall-capsall-small-capspetite-capsall-petite-capsunicasetitling-caps
Quando uma fonte inclui glifos de letras maiúsculas em tamanhos diferentes, font-variant-caps seleciona os mais adequados. Se a fonte não possui glifos dedicados de versaletes, o navegador os sintetiza reduzindo as letras maiúsculas normais — portanto o efeito sempre funciona, mas um resultado sintetizado parece menos refinado do que uma face de versaletes verdadeiramente desenhada.
A renderização real depende, portanto, do suporte a recursos OpenType da fonte.
Por que usar font-variant-caps
Versaletes são uma convenção tipográfica, não apenas um recurso de estilo. Use font-variant-caps quando quiser:
- Siglas e abreviações (NASA, HTML, PDF) com peso visual equivalente ao texto em minúsculas ao redor, em vez de se destacarem em maiúsculas de altura total.
- Subtítulos, linhas de crédito ou a linha de abertura de um artigo com destaque sutil, sem alterar o tamanho ou peso da fonte.
- Texto jurídico ou cabeçalhos de página onde uma cor uniforme e refinada ao longo da linha é importante.
Ao contrário de text-transform: uppercase, font-variant-caps não altera o texto subjacente — leitores de tela ainda leem a capitalização original, e o resultado utiliza glifos especialmente desenhados em vez de maiúsculas ampliadas. Prefira font-variant-caps sempre que o objetivo for estilo tipográfico em texto que já está com a capitalização correta.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdada | Sim. |
| Animável | Não. |
| Versão | CSS3 |
| Sintaxe DOM | object.style.fontVariantCaps = "petite-caps"; |
Sintaxe
Sintaxe da propriedade CSS font-variant-caps
font-variant-caps: normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps;Exemplo da propriedade font-variant-caps:
Exemplo da propriedade CSS font-variant-caps com os valores 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>Resultado
![Propriedade CSS font-variant-caps](https://api.w3docs.com/uploads/media/default/0001/03/ceee914d009da29a1afecc4c3ff8691af0fdd54b.png "Renderização da propriedade CSS font-variant-caps com texto small-caps, all-small-caps e normal" =420x)
font-variant-caps vs. text-transform
É fácil confundir font-variant-caps: small-caps com text-transform: uppercase. Eles parecem relacionados, mas se comportam de forma diferente:
<!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>No primeiro parágrafo, as letras minúsculas são exibidas como versaletes enquanto o texto original em minúsculas é preservado (um leitor de tela ainda lê "nasa"). No segundo, cada letra é forçada a maiúscula de altura total e o texto renderizado lê "THE AGENCY KNOWN AS NASA". Use font-variant-caps para refinamento tipográfico e text-transform quando precisar realmente alterar a capitalização.
Valores
| Valor | Descrição |
|---|---|
| normal | O uso de glifos alternativos não é ativado. |
| small-caps | Exibe versaletes. Os glifos de versaletes usam a forma das letras maiúsculas, mas são reduzidos ao tamanho das letras minúsculas. |
| all-small-caps | Exibe versaletes tanto para letras maiúsculas quanto minúsculas. |
| petite-caps | Exibe versaletes menores (petite caps). |
| all-petite-caps | Exibe versaletes menores tanto para letras maiúsculas quanto minúsculas. |
| unicase | Exibe uma mistura de versaletes para letras maiúsculas com letras minúsculas normais. |
| titling-caps | Exibe letras maiúsculas de título. |
Nota: initial e inherit são palavras-chave globais do CSS e podem ser usadas com qualquer propriedade CSS.
Compatibilidade com Navegadores
| Navegador | Suporte |
|---|---|
| Chrome | 48+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 9.1+ |
| Opera | 35+ |
Nota: font-variant-caps faz parte da forma abreviada font-variant. Ao usar a forma abreviada, inclua explicitamente font-variant-caps para preservar seu valor, pois outros valores da forma abreviada podem substituí-lo.
Propriedades relacionadas
font-variant-caps é uma das várias formas detalhadas controladas pela forma abreviada font-variant. As propriedades relacionadas permitem ajustar outros recursos OpenType:
font-variant-ligatures— controla ligaduras comuns, discricionárias e históricas.font-variant-numeric— escolhe entre algarismos alinhados/antigos, frações e ordinais.font-variant-alternates— seleciona alternativas estilísticas e de caracteres fornecidas pela fonte.font-feature-settings— a saída de emergência de baixo nível para qualquer recurso OpenType por sua tag de quatro caracteres.text-transform— altera a capitalização real das letras do texto.