Propriedade CSS font-variant-numeric

A propriedade CSS font-variant-numeric controla o uso de glifos alternativos para números, frações e marcadores ordinais. É uma parte da família font-variant compatível com shorthand que expõe os recursos numéricos OpenType sem recorrer à propriedade de baixo nível font-feature-settings.

Esta página cobre o que cada valor faz, quando utilizá-lo, os problemas relacionados ao suporte de fontes e um exemplo executável.

Por que usar

Os números podem ser renderizados em vários estilos: ordinais (ex.: 1^st), frações (ex.: ½), figuras alinhadas vs. estilo antigo, e espaçamento proporcional vs. tabular. Ao contrário das letras, essas variantes não alteram o significado do texto, mas adicionam contexto e afetam a legibilidade:

Figuras tabulares tornam cada dígito com a mesma largura para que os números se alinhem em tabelas e colunas de preços.
Figuras em estilo antigo têm ascendentes e descendentes que se misturam ao texto corrido em vez de se destacarem como um título.
Zero com barra disambigua 0 da letra O em código, IDs e números de série.
Frações diagonais transformam 1/2 em um único glifo tipográfico ½.

A principal limitação é o suporte a fontes: o recurso só funciona se o tipo de letra realmente inclui a tabela OpenType correspondente. A maioria das fontes do sistema suporta alguns recursos (alinhado, tabular), mas frações diagonais, frações empilhadas e zero com barra estão presentes em muito menos tipos. Quando uma fonte não possui um recurso, o valor é ignorado silenciosamente e os glifos padrão são exibidos.

Valor inicial	normal
Aplica-se a	Todos os elementos. Também se aplica a ::first-letter e ::first-line.
Herdado	Sim.
Animável	Discreto.
Versão	CSS3
Sintaxe DOM	object.style.fontVariantNumeric = "slashed-zero";

Sintaxe

font-variant-numeric: normal | [ <numeric-figure-values> || <numeric-spacing-values> || <numeric-fraction-values> || ordinal || slashed-zero ];

Os valores de figura, espaçamento, fração, ordinal e slashed-zero podem ser combinados em uma única declaração porque controlam aspectos independentes dos glifos:

/* Tabular lining digits with a slashed zero */
font-variant-numeric: tabular-nums lining-nums slashed-zero;

Exemplo

Exemplo da propriedade CSS font-variant-numeric com os valores oldstyle-nums e diagonal-fractions

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document </title>
    <style>
      .p1 {
        font-variant-numeric: oldstyle-nums;
      }
      .p2 {
        font-variant-numeric: diagonal-fractions;
      }
    </style>
  </head>
  <body>
    <h2>Font-variant-numeric property example</h2>
    <p class="p1">001528931</p>
    <p class="p2">1/2</p>
  </body>
</html>

Experimente Você Mesmo »

Resultado

Comparando vários recursos

Este exemplo define cada recurso numérico em seu próprio parágrafo para que você possa vê-los lado a lado (em uma fonte que os suporte, como muitas fontes do Google Fonts).

<!DOCTYPE html>
<html>
  <head>
    <title>font-variant-numeric features</title>
    <style>
      .lining   { font-variant-numeric: lining-nums; }
      .oldstyle { font-variant-numeric: oldstyle-nums; }
      .tabular  { font-variant-numeric: tabular-nums; }
      .diagonal { font-variant-numeric: diagonal-fractions; }
      .slashed  { font-variant-numeric: slashed-zero; }
    </style>
  </head>
  <body>
    <p class="lining">lining-nums: 0123456789</p>
    <p class="oldstyle">oldstyle-nums: 0123456789</p>
    <p class="tabular">tabular-nums: 1111 vs 8888</p>
    <p class="diagonal">diagonal-fractions: 1/2 3/4</p>
    <p class="slashed">slashed-zero: 1000 2030</p>
  </body>
</html>

Valores

Valor	Descrição
normal	Os glifos alternativos não são ativados.
`<numeric-figure-values>`	Controla o estilo da figura. Palavras-chave: `lining-nums`, `oldstyle-nums`.
`<numeric-spacing-values>`	Controla a largura do espaçamento. Palavras-chave: `proportional-nums`, `tabular-nums`.
`<numeric-fraction-values>`	Controla o estilo da fração. Palavras-chave: `diagonal-fractions`, `stacked-fractions`.
ordinal	Substitui dígitos por glifos ordinais sobrescritos (ex.: ¹ˢᵗ, ²ⁿᵈ) em vez de adicionar texto como "st" ou "nd". Mapeia para o OpenType `ordn`.
slashed-zero	Força um zero com barra. Mapeia para o OpenType `zero`.
initial	Define a propriedade com seu valor padrão.
inherit	Herda a propriedade do elemento pai.

Propriedades relacionadas

font-variant-numeric é um dos vários longhands do shorthand font-variant. Os outros têm como alvo diferentes categorias de glifos:

font-variant-caps — versaletes, petite caps e glifos de títulos.
font-variant-ligatures — ligaduras comuns, discricionárias e contextuais.

É suportado a partir do CSS3 em diante.

Prática

O que faz a propriedade CSS font-variant-numeric?

É usada para alterar a cor da fontePermite que caracteres de scripts diferentes se misturem melhorPermite controlar o uso de glifos alternativos para números, frações e marcadores ordinaisÉ usada para definir o tamanho da fonteIncentiva o uso de estilos específicos em um tipo de letra