diff options
Diffstat (limited to 'files/pt-br/web/css/font-feature-settings/index.html')
| -rw-r--r-- | files/pt-br/web/css/font-feature-settings/index.html | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/files/pt-br/web/css/font-feature-settings/index.html b/files/pt-br/web/css/font-feature-settings/index.html new file mode 100644 index 0000000000..dff644c1b5 --- /dev/null +++ b/files/pt-br/web/css/font-feature-settings/index.html @@ -0,0 +1,182 @@ +--- +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> |