--- 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><feature-tag-value></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("<string>")}} 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>