---
title: font-variation-settings
slug: Web/CSS/font-variation-settings
translation_of: Web/CSS/font-variation-settings
---
<div>{{CSSRef}}</div>

<p>A propriedade CSS <strong><code>font-variation-settings</code></strong> fornece controle de baixo nível sobre características de <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">variable font</a>, especificando os nomes dos quatro eixos das características que você deseja variar, juntamente com seus valores.</p>

<div>{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}</div>

<p class="hidden">A código fonte deste exemplo interativo está armazenado em um repositório no GitHub. Se você deseja contribuir com o projeto de exemplos interativos, clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> e envie-nos um pull request.</p>

<div class="note"><strong>Note</strong>: 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. {{cssxref("font-weight")}}, {{cssxref("font-style")}}).</div>

<div class="note"><strong>Note</strong>: font characteristics set using <code>font-variation-settings</code> will always override those set using the corresponding basic font properties, e.g. <code>font-weight</code>, no matter where they appear in the cascade. <span class="zhc-markdown-block zhc-markdown-block--html">In some browsers, this is currently only true when the <code>@font-face</code> declaration includes a <code>font-weight</code> range.</span></div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css no-line-numbers">/* 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;
</pre>

<h3 id="Values">Values</h3>

<p>O valor desta propriedade pode assumir uma de duas formas:</p>

<dl>
 <dt><code>normal</code></dt>
 <dd>O texto é colocado usando as configurações padrão.</dd>
 <dt><code>&lt;string&gt; &lt;number&gt;</code></dt>
 <dd>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 {{cssxref("&lt;string&gt;")}} de 4 caracteres ASCII seguidos por um {{cssxref("number")}} indicando o valor do eixo a ser definido. Se a <code>&lt;string&gt;</code> 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 <code>&lt;number&gt;</code> pode ser fracionário ou negativo, dependendo do intervalo de valores disponível em sua fonte, conforme definido pelo designer da fonte.</dd>
</dl>

{{csssyntax}}

<h2 id="Eixos_registrados_e_personalizados">Eixos registrados e personalizados</h2>

<p>Os eixos de fontes variáveis vêm em dois tipos: <strong>registrados</strong> e <strong>personalizados</strong>.</p>

<p>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.</p>

<p>Aqui estão os eixos registrados, juntamente com suas propriedades CSS correspondentes:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Tag do Eixo</th>
   <th scope="col">Propriedade CSS</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>"wght"</td>
   <td>{{cssxref("font-weight")}}</td>
  </tr>
  <tr>
   <td>"wdth"</td>
   <td>{{cssxref("font-stretch")}}</td>
  </tr>
  <tr>
   <td>"slnt" (slant)</td>
   <td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
  </tr>
  <tr>
   <td>"ital"</td>
   <td>{{cssxref("font-style")}}: <code>italic</code></td>
  </tr>
  <tr>
   <td>"opsz"</td>
   <td>
    <p>{{cssxref("font-optical-sizing")}}</p>
   </td>
  </tr>
 </tbody>
</table>

<p>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.</p>

<div class="note">
<p><strong>Nota</strong>: 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.</p>
</div>

<h2 id="Exemplos">Exemplos</h2>

<p>Veja abaixo exemplos interativos que demonstram os eixos registrados. Você pode encontrar vários outros exemplos de fontes variáveis em nosso <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a>, <a class="external external-icon" href="https://v-fonts.com/" rel="noopener">v-fonts.com</a>, e <a class="external external-icon" href="https://www.axis-praxis.org/" rel="noopener">axis-praxis.org</a>.</p>

<div class="warning">
<p><strong>Aviso</strong>: 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.</p>
</div>

<h3 id="Peso_wght">Peso (wght)</h3>

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

<div>{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 520)}}</div>

<h3 id="Inclinação_slnt">Inclinação (slnt)</h3>

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

<div>{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 520)}}</div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Status</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#low-level-font-variation-settings-control-the-font-variation-settings-property', 'font-variation-settings')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<p>{{Compat("css.properties.font-variation-settings")}}</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></li>
 <li><a href="https://www.microsoft.com/typography/otspec180/otvaroverview.htm">OpenType Font Variations Overview</a></li>
 <li><a href="https://www.microsoft.com/typography/otspec/dvaraxisreg.htm">OpenType Design-Variation Axis Tag Registry</a></li>
</ul>