Propriedade CSS font-variant
A propriedade CSS font-variant permite exibir texto em normal ou small-caps de uma font-family. Veja exemplos!
A propriedade CSS font-variant controla o uso de glifos alternativos em uma fonte — mais comumente small caps. Small caps renderizam letras minúsculas como letras maiúsculas desenhadas aproximadamente na altura das letras minúsculas originais, conferindo a títulos, abreviações e acrônimos uma aparência refinada e uniforme, sem o efeito de gritar em maiúsculas completas.
Na sua forma clássica (CSS 1), font-variant aceita um de dois valores: normal (o padrão) ou small-caps. Com small-caps, as letras minúsculas são convertidas em glifos maiúsculos exibidos um pouco menores que as letras maiúsculas normais, enquanto as letras que já eram maiúsculas mantêm seu tamanho normal.
Quando usar
font-variant: small-caps é útil quando você quer ênfase que transmita elegância, não destaque excessivo:
- Acrônimos e abreviações no meio do texto corrente (por exemplo, "html", "css") para que não dominem a linha com maiúsculas em altura total.
- Estilização de capitular ou de introdução na primeira linha de um artigo, frequentemente combinada com ::first-line.
- Títulos, créditos e legendas de figuras em layouts editoriais ou com estilo impresso.
Como o valor é herdado, defini-lo em um contêiner o aplica a todos os textos descendentes, a menos que um filho o substitua.
A propriedade font-variant também pode ser definida como parte de uma declaração abreviada font, junto com font-style, font-weight, font-size e font-family.
No CSS Fonts Module Level 4, font-variant tornou-se uma abreviação para uma família de propriedades individuais: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures e font-variant-east-asian. Isso permite que ela aceite muito mais valores (como all-small-caps, petite-caps, oldstyle-nums e slashed-zero). Os valores clássicos normal e small-caps ainda funcionam em todos os lugares; o suporte aos valores mais recentes depende tanto do navegador quanto de o tipo escolhido conter realmente esses glifos.
| Valor Inicial | normal |
|---|---|
| Aplica-se a | Todos os elementos. Também se aplica a ::first-letter e ::first-line. |
| Herdado | Sim. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | object.style.fontVariant = "normal"; <br>(Nota: fontVariant é o nome da propriedade JavaScript em camelCase para font-variant.) |
Sintaxe
Sintaxe da Propriedade CSS font-variant
font-variant: normal | small-caps | all-small-caps | titling-caps | initial | inherit;Exemplo da propriedade font-variant:
Exemplo da Propriedade CSS font-variant com small-caps
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.smallcaps {
font-variant: small-caps;
}
</style>
</head>
<body>
<h2>Font-variant property example</h2>
<p>Here we used a normal text as you can see.</p>
<p class="smallcaps">However, this text uses small-caps.</p>
</body>
</html>Resultado
Segundo exemplo: all-small-caps
O valor all-small-caps (do atalho Level 4) renderiza todas as letras como small caps, incluindo as que já eram maiúsculas — útil para títulos onde você deseja uma aparência uniforme de small caps.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.small {
font-variant: small-caps;
}
.all {
font-variant: all-small-caps;
}
</style>
</head>
<body>
<p class="small">The Quick Brown Fox</p>
<p class="all">The Quick Brown Fox</p>
</body>
</html>Com small-caps, as letras maiúsculas em "The", "Quick", "Brown" e "Fox" mantêm a altura completa; com all-small-caps, elas também são reduzidas à altura de small caps.
Valores
| Valor | Descrição | Experimente |
|---|---|---|
| normal | Os caracteres do texto são renderizados normalmente. Este é o valor padrão. | Experimente » |
| small-caps | Converte letras minúsculas em glifos maiúsculos exibidos em tamanho menor; as maiúsculas existentes mantêm seu tamanho completo. | Experimente » |
| all-small-caps | Converte tanto letras minúsculas quanto maiúsculas em small caps (Level 4). | Experimente » |
| petite-caps | Semelhante a small-caps, mas usando glifos petite-caps, quando a fonte os fornece (Level 4). | Experimente » |
| initial | Define a propriedade com seu valor padrão (normal). | Experimente » |
| inherit | Herda o valor da propriedade do elemento pai. |
Propriedades relacionadas
- font — a abreviação que pode incluir
font-variant. - font-style — texto normal, itálico ou oblíquo.
- font-weight — peso (negrito) do texto.
- text-transform — força
uppercase/lowercase/capitalize(altera os caracteres, diferente de small-caps que apenas muda a forma dos glifos). - letter-spacing — combina bem com small caps para melhorar a legibilidade de acrônimos.