---
title: font-feature-settings
slug: Web/CSS/font-feature-settings
tags:
  - CSS
  - Fontes CSS
  - Propriedade CSS
  - Referencia
translation_of: Web/CSS/font-feature-settings
---
<div>{{CSSRef}}</div>

<h2 id="Sumário">Sumário</h2>

<p>A propriedade <strong><code>font-feature-settings</code></strong> do CSS te dá controle sobre tipografia avançada nas fontes do tipo OpenType.</p>

<div class="note"><strong>Nota:</strong> Sempre que possível, deve usar o {{cssxref("font-variant")}} propriedade abreviada ou uma propriedade extensa associada, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-numeric")}} ou {{cssxref("font-variant-position")}}.<br>
<br>
Esta propriedade é um recurso de baixo nível projetado para lidar com casos especiais onde não existe outra maneira de habilitar ou acessar um recurso de fonte OpenType.<br>
<br>
Em particular, esta propriedade CSS não deve ser usada para habilitar small caps.</div>

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

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

<pre class="brush:css notranslate">/* Use the default settings */
font-feature-settings: normal;

/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;

/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>normal</code></dt>
 <dd>Text is laid out using default settings.</dd>
 <dt><code>&lt;feature-tag-value&gt;</code></dt>
 <dd>Ao renderizar texto, a lista de características OpenType é passada para o mecanismo de layout de texto para ativar ou desativar recursos do tipo de letra. A tag é sempre uma {{cssxref("&lt;string&gt;")}} de 4 caracteres ASCII. Se possuir mais ou menos caracteres ou conter caracteres fora da faixa U+20 - U+7E, toda a propriedade é invalida.<br>
 O valor é um inteiro positivo. As duas palavras-chaves <code>on</code> e <code>off</code> são sinônimos de <code>1</code> e <code>0</code> respectivamente. Se nenhum valor é definido, o padrão é <code>1</code>. Para características OpenType não-booleanas (ex. <a href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>), o valor implica em um glifo particular para ser selecionado; para valores booleanos, é um interruptor.</dd>
</dl>

<h3 id="Sintaxe_formal">Sintaxe formal</h3>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

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

<pre class="brush:css notranslate">/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }

/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }

/* enable historical forms */
.hist { font-feature-settings: "hist"; }

/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }

/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }

/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }

/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }

/* enable stylistic set 7 */
.fancystyle {
  font-family: Gabriola; /* available on Windows 7, and on Mac OS */
  font-feature-settings: "ss07";
}
</pre>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificacão</th>
   <th scope="col">Estado</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#propdef-font-feature-settings', 'font-feature-settings')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>Initial definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilidade_do_navegador">Compatibilidade do navegador</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>
    <p>16.0 {{property_prefix("-webkit")}}<br>
     {{CompatChrome(48.0)}} (unprefixed)</p>
   </td>
   <td>
    <p>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}} [1]<br>
     {{CompatGeckoDesktop("29.0")}} {{property_prefix("-moz")}} [2]<br>
     {{CompatGeckoDesktop("34.0")}} [3]</p>
   </td>
   <td>10.0</td>
   <td>15.0 {{property_prefix("-webkit")}}</td>
   <td>{{CompatSafari("9.1")}} (partial support in versions 4.0-6.0)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Android Webview</th>
   <th>Chrome para Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suporte básico</td>
   <td>{{CompatAndroid(4.4)}}</td>
   <td>{{CompatChrome(48.0)}} (unprefixed)</td>
   <td>{{CompatChrome(48.0)}} (unprefixed)</td>
   <td>
    <p>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}} [1]<br>
     {{CompatGeckoDesktop("29.0")}} {{property_prefix("-moz")}} [2]<br>
     {{CompatGeckoDesktop("34.0")}} [3]</p>
   </td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera("24")}}</td>
   <td><span style="font-size: 12px; line-height: 18px;">{{CompatSafari("9.3")}} (partial support in versions 3.2-6.1)</span></td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] From Gecko 2.0 (Firefox 4.0) to Gecko 14.0 (Firefox 14.0) included, Gecko supported an older syntax, slightly different from the modern one: <a href="http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/" title="http://hacks.mozilla.org/2010/11/firefox-4-font-feature-support/">OpenType Font Feature support in Firefox 4</a>.</p>

<p>[2] The <a href="http://mpeg.chiariglione.org/standards/mpeg-4/open-font-format/text-isoiec-cd-14496-22-3rd-edition">ISO/IEC CD 14496-22 3rd edition</a> suggests to use the <code>ssty</code> feature to provide glyph variants adjusted to be more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the <a href="/en-US/docs/Web/MathML">MathML</a> rendering engine. It also suggests applying the <code>dtls</code> feature to letters when positing mathematical accent over it, in order to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can always override via CSS the default values determined by the MathML rendering engine.</p>

<p>[3] Starting with Firefox 34, the version prefixed with <code>-moz-</code> is only kept for backward compatibility purpose. It is controlled by the <code>layout.css.prefixes.font-features</code>, defaulting to <code>true</code>. The prefixed property will be removed in the future.</p>

<h2 id="Veja_Também">Veja Também</h2>

<ul>
 <li><a href="https://www.fontfont.com/staticcontent/downloads/FF_OT_User_Guide.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide (pdf)</a></li>
 <li><a href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</li>
 <li><a href="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx" title="http://blogs.msdn.com/b/ie/archive/2012/01/09/css-corner-using-the-whole-font.aspx">Using the whole font</a> (The -moz syntax is the old one. On Gecko, use the -ms syntax but with -moz).</li>
</ul>