font-variation-settings

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2018.

A propriedade CSS font-variation-settings fornece controle de baixo nível sobre características de variable font, especificando os nomes dos quatro eixos das características que você deseja variar, juntamente com seus valores.

Experimente

Nota: This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. font-weight, font-style).

Nota: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade. In some browsers, this is currently only true when the @font-face declaration includes a font-weight range.

Sintaxe

css
/* Usar as configurações padrão */
font-variation-settings: normal;

/* Definir valores para os nomes dos eixos de fontes variáveis */
font-variation-settings: "XHGT" 0.7;

/* Valores globais */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

Values

O valor desta propriedade pode assumir uma de duas formas:

normal

O texto é colocado usando as configurações padrão.

<string> <number>

Ao renderizar texto, a lista de nomes dos eixos de fontes variáveis é passada para o mecanismo de layout de texto para ativar ou desativar os recursos de fonte. Cada configuração é sempre um ou mais pares que consistem em um <string> de 4 caracteres ASCII seguidos por um <number> indicando o valor do eixo a ser definido. Se a <string> tiver mais ou menos caracteres ou contiver caracteres fora do intervalo de códigos U+20 - U+7E, toda a propriedade será inválida. O <number> pode ser fracionário ou negativo, dependendo do intervalo de valores disponível em sua fonte, conforme definido pelo designer da fonte.

font-variation-settings = 
  normal                        |
  [ <opentype-tag> <number> ]#  

<opentype-tag> = 
  <string>

Eixos registrados e personalizados

Os eixos de fontes variáveis vêm em dois tipos: registrados e personalizados.

Os eixos registrados são os mais comumente encontrados - comuns o suficiente para que os autores das especificações considerassem que valia a pena padronizar. Observe que isso não significa que o autor precise incluir tudo isso em sua fonte.

Aqui estão os eixos registrados, juntamente com suas propriedades CSS correspondentes:

Tag do Eixo Propriedade CSS
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz" font-optical-sizing

Os eixos personalizados podem ser qualquer coisa que o designer da fonte deseje variar em sua fonte, por exemplo, alturas ascendentes ou descendentes, o tamanho das serifas ou qualquer outra coisa que possam imaginar. Qualquer eixo pode ser usado desde que seja dado um eixo exclusivo de 4 caracteres. Alguns acabam se tornando mais comuns e podem até se registrar com o tempo.

Nota: As tags de eixo registrados são identificadas usando tags minúsculas, enquanto os eixos personalizados devem receber tags maiúsculas. Observe que os designers de fontes não são forçados a seguir essa prática de maneira alguma, e alguns não o fazem. O ponto importante aqui é que as tags de eixo diferenciam maiúsculas de minúsculas.

Exemplos

Veja abaixo exemplos interativos que demonstram os eixos registrados. Você pode encontrar vários outros exemplos de fontes variáveis em nosso Variable fonts guide, v-fonts.com, e axis-praxis.org.

Warning: Aviso: Para usar fontes variáveis em seu sistema operacional, você precisa verificar se está atualizado. Por exemplo, os sistemas operacionais Linux precisam da versão mais recente do Linux Freetype, e o macOS anterior à 10.13 não suportam fontes variáveis. Se o seu sistema operacional não estiver atualizado, você não poderá usar fontes variáveis em páginas da Web ou no Firefox Developer Tools.

Peso (wght)

O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores de peso da fonte.

Inclinação (slnt)

O CSS do exemplo a seguir pode ser editado para permitir que você mude os valores oblíquos / oblíquos da fonte.

Especificações

Specification
CSS Fonts Module Level 4
# font-variation-settings-def

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também