Propriedade CSS font-feature-settings
A propriedade CSS font-feature-settings controla recursos tipográficos avançados em fontes OpenType. Leia sobre a propriedade e veja exemplos.
A propriedade font-feature-settings oferece controle de baixo nível sobre os recursos tipográficos avançados incorporados nas fontes OpenType — como versaletes, numerais de estilo antigo, ligaduras, frações e alternativas estilísticas. Esses recursos são projetados pelo designer tipográfico e armazenados dentro do arquivo de fonte; font-feature-settings é o interruptor que os ativa ou desativa.
O valor é a palavra-chave normal (o padrão) ou uma lista separada por vírgulas de pares <feature-tag-value>. Cada par é uma tag de recurso OpenType de quatro letras escrita como string, seguida opcionalmente de um valor:
font-feature-settings: "smcp" 1; /* enable small caps */
font-feature-settings: "smcp" on; /* same thing — "on" means 1 */
font-feature-settings: "smcp", "onum"; /* two features, omitted value defaults to 1 */
font-feature-settings: "liga" 0; /* disable standard ligatures */As palavras-chave on e off são sinônimos de 1 e 0. A maioria dos recursos são simples alternâncias ligado/desligado, mas alguns (como conjuntos estilísticos ou variantes de caracteres) aceitam um número inteiro maior para selecionar uma variante específica. O recurso só tem efeito visível quando a fonte renderizada realmente contém esse recurso — se a fonte não o tiver, a declaração é silenciosamente ignorada.
Quando usar (e quando não usar)
font-feature-settings é a válvula de escape. Para necessidades comuns, prefira a abreviação de alto nível font-variant e suas subpropriedades (font-variant-caps, font-variant-numeric, font-variant-ligatures, …). Elas são mais fáceis de ler, são herdadas de forma limpa e têm fallback gracioso:
/* Preferred — high-level and readable */
font-variant-caps: small-caps;
/* Low-level equivalent — only when the font has no friendlier path */
font-feature-settings: "smcp";Use font-feature-settings apenas quando precisar de um recurso que não tem uma palavra-chave font-variant dedicada — por exemplo, um conjunto estilístico específico da fonte ("ss01") ou um recurso discricionário que a fonte expõe por tag.
Um ponto importante a observar: font-feature-settings é tudo ou nada. Como a lista inteira substitui qualquer valor herdado, redeclará-la em um elemento filho redefine todos os recursos definidos no elemento pai. Mantenha todas as tags que deseja ativas em uma única declaração em vez de espalhá-las por várias regras.
Tags de recursos OpenType mais comuns
| Tag | Recurso | Uso típico |
|---|---|---|
smcp | Versaletes | Renderiza letras minúsculas como maiúsculas pequenas. |
c2sc | Maiúsculas para versaletes | Converte letras maiúsculas em versaletes também. |
liga | Ligaduras padrão | Combina pares de letras como fi, fl (ativo por padrão; defina 0 para desativar). |
dlig | Ligaduras discricionárias | Ligaduras decorativas como ct, st. |
onum | Numerais de estilo antigo | Numerais com ascendentes/descendentes que se encaixam no texto corrido. |
lnum | Numerais alinhados | Numerais de altura uniforme alinhados à altura da maiúscula. |
tnum | Numerais tabulares | Numerais de largura fixa para colunas de números. |
frac | Frações | Formata 1/2 como uma fração tipográfica. |
kern | Kerning | Ajusta o espaçamento entre pares específicos de letras. |
swsh | Swashes | Floreados decorativos nos glifos. |
O suporte nos navegadores modernos é excelente, mas em motores mais antigos ainda é possível encontrar as versões prefixadas -webkit-, -moz- e -ms- desta propriedade.
| 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.fontFeatureSettings = "normal"; |
Sintaxe
Sintaxe da propriedade CSS font-feature-settings
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Exemplo da propriedade font-feature-settings:
Exemplo da propriedade CSS font-feature-settings com o valor smcp
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Exemplo com múltiplos recursos
Você pode ativar vários recursos ao mesmo tempo com uma lista separada por vírgulas. Aqui ativamos os numerais de estilo antigo e desativamos as ligaduras padrão no mesmo elemento:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
font-feature-settings: "onum" 1, "liga" 0;
}
</style>
</head>
<body>
<p>Order 1234567890 ships in office. </p>
</body>
</html>Observe que os numerais só mudam se a fonte escolhida incluir numerais de estilo antigo. Se um recurso estiver ausente na fonte, essa parte da declaração não terá efeito.
Valores
| Valor | Descrição |
|---|---|
| normal | Este é o valor padrão desta propriedade. |
<feature-tag-value> | Ao renderizar texto, a lista de valores de tag de recurso OpenType é passada ao mecanismo de layout de texto para ativar ou desativar recursos da fonte. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade do elemento pai. |
Propriedades relacionadas
- font-variant — a abreviação de alto nível que deve ser sua primeira escolha para versaletes, ligaduras e numerais.
- font-family — escolha uma fonte que realmente contenha os recursos OpenType que você deseja ativar.
- text-transform — altera a capitalização dos próprios caracteres, ao contrário dos versaletes, que apenas mudam a aparência deles.
- letter-spacing — ajusta o espaçamento entre caracteres no nível de layout, em vez de usar o kerning da fonte.