font-variation-settings

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.

Note: 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).
Note: 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

/* 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.
normal | [ <string> <number> ]#

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.

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

Especificação Status Comentário
CSS Fonts Module Level 4
The definition of 'font-variation-settings' in that specification.
Rascunho atual Initial definition
Initial valuenormal
Aplica-se aall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Midiavisual
Computed valueas specified
Animation typea transform
Canonical orderper grammar

Compatibilidade do navegador

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
font-variation-settingsChrome Full support 62Edge Full support 17Firefox Full support 62
Full support 62
No support 53 — 62
Disabled
Disabled From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49Safari Full support 11
Notes
Full support 11
Notes
Notes Requires macOS 10.13 High Sierra or later.
WebView Android Full support 62Chrome Android Full support 62Firefox Android Full support 62
Full support 62
No support 53 — 62
Disabled
Disabled From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 46Safari iOS Full support 11
Notes
Full support 11
Notes
Notes Requires iOS 11 or later.
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

Veja também