Propriedade CSS font-variant-alternates
A propriedade CSS font-variant-alternates controla a seleção de glifos alternativos. Veja os valores e experimente exemplos.
A propriedade CSS font-variant-alternates controla a seleção de glifos alternativos — as formas especiais de caracteres (swashes, ornamentos, conjuntos estilísticos, formas históricas, entre outros) que uma fonte OpenType pode disponibilizar além dos seus caracteres padrão.
Esta página explica o que são glifos alternativos, como ativá-los, como cada função se mapeia para os recursos OpenType e os cuidados a ter.
Por que usar glifos alternativos?
Muitas fontes OpenType de alta qualidade incluem versões extras de determinadas letras. Um swash pode adicionar um floreado decorativo a uma maiúscula; um conjunto estilístico pode transformar toda uma família de letras em um visual caligráfico; as formas históricas podem restaurar o "ſ" longo usado em tipografias mais antigas. Por padrão, o navegador renderiza o glifo padrão — font-variant-alternates é a forma de optar pelos alternativos sem precisar conhecer as tags de recursos OpenType de baixo nível.
Você recorreria a esta propriedade quando quiser refinamento tipográfico (logotipos, títulos, texto de exibição editorial) e a fonte escolhida realmente contiver os glifos alternativos. Se a fonte não tiver alternativas, a propriedade não produzirá nenhum efeito visível.
Como funciona: @font-feature-values
A maioria das funções abaixo (stylistic(), styleset(), character-variant(), swash(), ornaments(), annotation()) recebe um nome em vez de um número. Esses nomes legíveis são definidos uma vez com a regra-at @font-feature-values e depois referenciados na sua folha de estilos. Essa indireção permite que você atribua nomes significativos como fancy ou circled aos índices de recursos, de outra forma opacos, que uma fonte expõe.
/* 1. Map a readable name to a feature index, per font family */
@font-feature-values "Leitura Display Swashes" {
@swash { fancy: 1; }
}
/* 2. Reference the name in font-variant-alternates */
.title {
font-family: "Leitura Display Swashes";
font-variant-alternates: swash(fancy);
}A exceção é historical-forms, que é uma palavra-chave simples e não precisa de uma entrada @font-feature-values.
| 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 | CSS3 |
| Sintaxe DOM | object.style.fontVariantAlternates = "normal"; |
Sintaxe
Sintaxe da Propriedade CSS font-variant-alternates
font-variant-alternates: normal | historical-forms | stylistic() | styleset() | character-variant() | swash() | ornaments() | annotation();Exemplo da propriedade font-variant-alternates:
Exemplo da Propriedade CSS font-variant-alternates
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 2rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>Font-variant-alternates property example</h2>
<p>This paragraph uses the swash alternate.</p>
<p class="variant">This paragraph uses the swash alternate.</p>
</body>
</html>Resultado
Valores
| Valor | Descrição |
|---|---|
| normal | Nenhum dos recursos é ativado. |
| historical-forms | Ativa a exibição de formas históricas. |
| stylistic() | Ativa a exibição de alternativas estilísticas. |
| styleset() | Ativa a exibição com conjuntos estilísticos. |
| character-variant() | Ativa alternativas estilísticas específicas para caracteres. |
| swash() | Ativa glifos swash. |
| ornaments() | Ativa a exibição de ornamentos. |
| annotation() | Ativa formas de anotação alternativas. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
É possível combinar várias funções em uma única declaração separando-as com espaços — por exemplo font-variant-alternates: stylistic(alt-a) styleset(my-set);. Apenas a palavra-chave especial normal não pode ser misturada com as funções.
Como as funções se mapeiam para os recursos OpenType
Se você utilizou a abordagem de nível mais baixo font-feature-settings, esta tabela mostra o recurso OpenType ao qual cada função corresponde:
| Função | Recurso OpenType | Uso típico |
|---|---|---|
historical-forms | hist | "ſ" longo, formas de letras arcaicas. |
stylistic() | salt | Um único glifo alternativo escolhido por nome. |
styleset() | ss01–ss20 | Um conjunto coordenado de alternativas. |
character-variant() | cv01–cv99 | Alternativas por caractere que podem ser definidas independentemente. |
swash() | swsh / cswh | Floreados decorativos em letras. |
ornaments() | ornm | Dingbats e marcas decorativas. |
annotation() | nalt | Números e letras circulados ou enquadrados. |
Cuidados
- A fonte deve conter a alternativa. Se a fonte ativa não tiver swash ou conjunto estilístico, a propriedade simplesmente não faz nada — não há glifo de fallback para usar.
- Os nomes devem ser declarados primeiro. Uma função como
swash(fancy)só funciona sefancyestiver mapeado em um bloco@font-feature-valuespara afont-familycorrespondente. - É herdada. Como a propriedade é herdada, aplique-a no menor elemento que precisar dela (ou redefina-a como
normalnos filhos) para evitar que glifos decorativos se propaguem para o texto ao redor.
Propriedades relacionadas
font-variant— a abreviação que agrupa todas as propriedades longasfont-variant-*.@font-feature-values— define os nomes legíveis referenciados por esta propriedade.font-family— seleciona a fonte que fornece as alternativas.
Compatibilidade com Navegadores
| Navegador | Suporte |
|---|---|
| Chrome | 36+ |
| Edge | 79+ |
| Firefox | 34+ |
| Safari | 10+ |
| Opera | 23+ |