Regra CSS @font-feature-values
A regra @font-feature-values usa um nome para recursos na propriedade font-variant-alternates. Saiba mais sobre os valores e veja exemplos.
A at-rule @font-feature-values permite atribuir um nome legível por humanos a um índice numérico de recurso OpenType, para que você possa referenciar glifos alternativos de uma fonte pelo nome em vez de por número bruto ao usar a propriedade font-variant-alternates.
Esta página explica o problema que a regra resolve, sua sintaxe, os blocos de recursos que ela aceita e um exemplo funcional completo.
Por que ela existe
Muitas fontes OpenType incluem glifos alternativos além da forma padrão de cada caractere — swashes (floreios decorativos), ornamentos, alternativas estilísticas, formas históricas, entre outros. Dentro da fonte, cada alternativa é identificada apenas por um número (um índice). Sem essa at-rule, você teria que lembrar que, por exemplo, "o swash sofisticado é o índice 1" e codificar esse número em todo lugar.
@font-feature-values permite que você escreva esse mapeamento uma vez, dê ao índice um nome como fancy, e então chame swash(fancy) no seu CSS. O nome se aplica por família de fontes, então duas fontes diferentes podem definir cada uma seu próprio swash fancy apontando para índices diferentes.
Dois pontos importantes a ter em mente:
- Funciona exclusivamente com
font-variant-alternates— não tem efeito em nenhuma outra propriedade. - Só produz resultado se a fonte correspondente estiver realmente carregada e essa fonte contiver os glifos alternativos referenciados. Se você precisar alternar recursos OpenType de baixo nível pelo tag de quatro letras, use
font-feature-settings.
Pode ser colocada no nível superior de uma folha de estilos ou dentro de uma at-rule de grupo condicional como @media.
Blocos de recursos
O corpo da at-rule pode conter qualquer um desses blocos nomeados, cada um mapeando um nome a um índice:
@swash@annotation@ornaments@stylistic@styleset@character-variant
Cada nome de bloco corresponde à notação funcional equivalente em font-variant-alternates (um nome @swash é usado por swash(), um nome @ornaments por ornaments(), e assim por diante).
Sintaxe
Sintaxe da At-rule CSS @font-feature-values
@font-feature-values <family-name> {
@swash { name: index; }
@annotation { name: index; }
@ornaments { name: index; }
@stylistic { name: index; }
@styleset { name: index; }
@character-variant { name: index; }
}Exemplo da at-rule @font-feature-values:
Exemplo da At-rule CSS @font-feature-values
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
@font-feature-values "Leitura Display Swashes" {
@swash {
fancy: 1;
}
}
p {
font-size: 1.5rem;
}
.variant {
font-family: Leitura Display Swashes;
font-variant-alternates: swash(fancy);
}
</style>
</head>
<body>
<h2>@Font-feature-values at-rule example</h2>
<p>
The font-variant-alternates CSS property controls the usage of alternate glyphs. These alternate glyphs may be referenced by alternative names defined in @font-feature-values.
</p>
<p>This property is supported by Firefox and Safari.</p>
<p class="variant">This property is supported by Firefox and Safari.</p>
</body>
</html>Aqui, @swash { fancy: 1; } nomeia o índice 1 da fonte Leitura Display Swashes como fancy. O parágrafo .variant então ativa essa alternativa com font-variant-alternates: swash(fancy). Como a fonte nomeada não está carregada neste snippet, o texto volta para uma fonte padrão e os swashes não serão renderizados — o objetivo do exemplo é mostrar a configuração, não o resultado visual. Substitua por uma fonte que você realmente tenha carregada via @font-face para ver as alternativas.
Suporte nos navegadores
@font-feature-values é suportado no Firefox, Safari e Chrome/Edge (o Chromium adicionou suporte na versão 128, em agosto de 2024). O Internet Explorer nunca o suportou. Como glifos alternativos são puramente decorativos, tratá-los como aprimoramento progressivo é seguro: navegadores e fontes que não possuem o recurso simplesmente exibem o glifo padrão.
Valores
| Valor | Descrição |
|---|---|
| @swash | Especifica um nome de recurso que funciona com a notação funcional swash() de font-variant-alternates. |
| @annotation | Especifica um nome de recurso que funciona com a notação funcional annotation() de font-variant-alternates. |
| @ornaments | Especifica um nome de recurso que funciona com a notação funcional ornaments() de font-variant-alternates. |
| @stylistic | Especifica um nome de recurso que funciona com a notação funcional stylistic() de font-variant-alternates. |
| @styleset | Especifica um nome de recurso que funciona com a notação funcional styleset() de font-variant-alternates. |
| @character-variant | Especifica um nome de recurso que funciona com a notação funcional character-variant() de font-variant-alternates. |