font-feature-settings

  • Revision slug: CSS/font-feature-settings
  • Revision title: font-feature-settings
  • Revision id: 22290
  • Created:
  • Creator: Jdaggett
  • Is current revision? No
  • Comment 37 words added

Revision Content

{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("2.0") }}

Summary

The -moz-font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.

  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Percentages: n/a
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

-moz-font-feature-settings : normal | <string>

where <string> is defined as quoted list of OpenType feature tag-value pairs

Values

normal
Text is laid out using default settings.
<string>
When rendering text, the list of OpenType feature tags is passed to the text layout engine to enable or disable font features.  For example, "tagx=1" implies that the OpenType feature 'tagx' is enabled.  Using a value of 0 disables a given feature.  For non-boolean OpenType features (e.g. stylistic alternates), the value implies a particular glyph to be selected.

Examples

/* use small-cap alternate glyphs */
.smallcaps { -moz-font-feature-settings: "smcp=1"; }

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

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

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

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

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

Notes

This syntax for this property is still under development and will likely change as the CSS3 Fonts specification evolves. Authors should not rely on the current syntax being supported in future versions of Firefox.

Browser compatibility

Supported in Gecko 2.0 (Firefox 4.0), no support in other major browsers.

Specifications

See Also

Revision Source

<p>{{ CSSMozExtensionRef() }}{{ gecko_minversion_header("2.0") }}</p>
<h3>Summary</h3>
<p>The<code> -moz-font-feature-settings </code>CSS property allows control over advanced typographic features in OpenType fonts.</p>
<ul> <li>{{ Xref_cssinitial() }}: {{ Cssxref("normal") }}</li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Percentages: n/a</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<p>-moz-font-feature-settings : normal | &lt;string&gt;</p>
<p>where &lt;string&gt; is defined as quoted list of OpenType feature tag-value pairs</p>
<h3>Values</h3>
<dl> <dt>normal</dt> <dd>Text is laid out using default settings.</dd> <dt>&lt;string&gt;</dt> <dd>When rendering text, the list of OpenType feature tags is passed to the text layout engine to enable or disable font features.  For example, "tagx=1" implies that the OpenType feature 'tagx' is enabled.  Using a value of 0 disables a given feature.  For non-boolean OpenType features (e.g. <a class=" external" href="http://www.microsoft.com/typography/otspec/features_pt.htm#salt" title="http://www.microsoft.com/typography/otspec/features_pt.htm#salt">stylistic alternates</a>), the value implies a particular glyph to be selected.</dd>
</dl>
<h3>Examples</h3>
<pre>/* use small-cap alternate glyphs */
.smallcaps { -moz-font-feature-settings: "smcp=1"; }

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

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

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

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

/* enable automatic fractions */
.fractions { -moz-font-feature-settings: "frac=1"; }
</pre>
<h3>Notes</h3>
<p>This syntax for this property is still under development and will likely change as the <a class=" external" href="http://dev.w3.org/csswg/css3-fonts">CSS3 Fonts specification</a> evolves. Authors should not rely on the current syntax being supported in future versions of Firefox.</p>
<h3>Browser compatibility</h3>
<p>Supported in Gecko 2.0 (Firefox 4.0), no support in other major browsers.</p>
<h3>Specifications</h3>
<ul> <li><a class=" external" href="http://dev.w3.org/csswg/css3-fonts/#font-feature-settings-prop" title="http://dev.w3.org/csswg/css3-fonts/#font-feature-settings-prop">CSS3 Fonts</a> Editor's Draft</li> <li> <p><a class=" external" href="http://www.microsoft.com/typography/otspec/featurelist.htm" title="http://www.microsoft.com/typography/otspec/featurelist.htm">OpenType Feature Tags</a> list</p> </li>
</ul>
<h3>See Also</h3>
<ul> <li><a class=" external" href="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf" title="http://www.fontfont.com/opentype/FF_OT_UserGuide_v2.pdf">FontFont OpenType User Guide</a></li>
</ul>
Revert to this revision