A font-variant-numericpropriedade em CSS oferece suporte ao formato de fonte OpenType especificando quais glifos numéricos usar em uma classe, incluindo variações para frações, marcadores ordinais e variações estilizadas, entre outros.
Um Pequeno Contexto
Tendemos a pensar nos números como um glifo estático. Ele imprime e é assim que é. No entanto, os números são muito mais parecidos com as letras do alfabeto no sentido de que podem ter variantes que, dependendo do contexto, valem a pena modificar o estilo. Estamos falando de coisas como frações (por exemplo, 1/4), ordinais (por exemplo, 1º) e até mesmo o equivalente a numerais em maiúsculas e minúsculas. No entanto, ao contrário das letras, essas variações não alteram o significado do conteúdo, embora forneçam contexto adicional ou tenham um impacto na legibilidade.
O problema com essa propriedade é que ela foi projetada para funcionar com fontes habilitadas para OpenType, um formato de fonte novo, mas em rápido desenvolvimento, que fornece um conjunto mais extenso de glifos que podem ser direcionados para uso em diferentes contextos. Você pode frequentemente ouvir OpenType referido como fontes variáveis e isso porque eles contêm uma grande variedade de caracteres que os tornam mais flexíveis para uma variedade de usos. Variações para todas as coisas!
O problema é que a disponibilidade de fontes que podem aproveitar ao máximo font-variante font-variant-numericé limitada. Há um número crescente de fontes compatíveis com OpenType, mas há um subconjunto muito menor de opções que fazem uso de todos os recursos que font-variant-numericoferecem e muitas vezes são premium e caros. Richard Butler resume bem:
Temos à nossa disposição números 'maiúsculos' chamados de numerais de forro ou titulação, e numerais 'minúsculos' chamados de estilo antigo ou numerais de texto. ... Também é o caso de que a grande maioria das fontes não são modernas nem profissionais, se moderno significa OpenType- habilitado e profissional significa projetado com ambos os conjuntos de numerais.
O maior problema que normalmente nos preocupa quando se trata de propriedades CSS é o suporte do navegador, mas essa propriedade e todas as outras relacionadas font-varianttambém estão à mercê dos designers de fontes para oferecer suporte total à tabela.
Isso é uma chatice, mas estamos começando a ver fontes mais “modernas” e “profissionais” aparecendo, mesmo no momento em que este livro foi escrito. Adobe TypeKit anunciou que está trabalhando para oferecer suporte a recursos OpenType e há rumores de que o Google Fonts está a bordo também, agora que o Chrome 62 os suporta.
Uso Básico
Este é o uso mais básico da propriedade:
.fraction ( font-variant-numeric: diagonal-fractions; )Os navegadores mais antigos não reconhecem isso, mas aceitam o font-feature-settingsque desbloqueia os mesmos recursos com valores diferentes. Podemos emparelhar as duas propriedades para um suporte mais profundo:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )Ou podemos personalizar isso para detectar o suporte do navegador usando de @supportsmodo que a nova propriedade seja veiculada apenas para navegadores compatíveis:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )Valores
A font-variant-numericpropriedade aceita os seguintes valores. O font-feature-settingsvalor correspondente é anotado para referência.
Valores Gerais
| Valor | Descrição | Configuração de recursos |
|---|---|---|
normal | Nenhum dos recursos listados abaixo está habilitado. | N / D |
ordinal | Aplica letras para representar a ordem numérica, normalmente na forma de um sobrescrito. | ordn |
slashed-zero | Exibe uma forma alternativa de zero com uma linha diagonal que o atravessa. | zero |
Valores de figura numérica
| Valor | Descrição | Configuração de recursos |
|---|---|---|
lining-nums | As linhas são numeradas verticalmente para que fiquem na mesma altura e são alinhadas no mesmo plano. | lnum |
oldstyle-nums | Permite um alinhamento vertical alternativo onde os números nem sempre são exibidos uniformemente na mesma linha de base. | onum |
Valores Numéricos de Fração
| Valor | Descrição | Configuração de recursos |
|---|---|---|
diagonal-fractions | Exibe as frações em um formato menor, onde o numerador (número superior) e o denominador (número inferior) são divididos por uma barra diagonal. | frac |
stacked-fractions | Exibe as frações em um formato menor, onde o numerador e o denominador são empilhados um sobre o outro e divididos por uma linha horizontal. | afrc |
Valores de espaçamento numérico
| Valor | Descrição | Configuração de recursos |
|---|---|---|
proportional-nums | Permite que os números ocupem seu próprio espaço, que não é necessariamente igual em largura a outros numerais. | pnum |
tabular-nums | Exibe números com tamanhos iguais, proporcionais e espaçamentos para uma formatação limpa em contextos de dados tabulares. | tnum |
A especificação inclui uma observação especial sobre o uso de ordinalporque se assemelha ao supelemento sobrescrito , mas é marcado de forma diferente.
Para sobrescritos:
sup ( font-variant-position: super; )Two squared is 22Para marcadores ordinais:
.ordinal ( font-variant-numeric: ordinal; )1stSuporte para navegador
A font-variant-numericpropriedade atualmente faz parte da especificação CSS Fonts Module Nível 3, que está no status Candidate Recommendation no momento da redação deste artigo, o que significa que pode ser alterada a qualquer momento.
Área de Trabalho
| cromada | Beira | Raposa de fogo | IE | Ópera | Safári |
|---|---|---|---|---|---|
| 52 | Não | 34 | Não | 39 | 9,1 |
O Firefox 24-34 (exclusivo) oferece suporte à propriedade por trás da layout.css.font-features.enabledpreferência quando está definida como true.
Móvel
| Navegador Android | Chrome Android | Beira | Raposa de fogo | IE | Opera Android | iOS Safari |
|---|---|---|---|---|---|---|
| 52 | 52 | Não | 34 | Não | 39 | sim |