font-feature-settings

  • Revision slug: CSS/font-feature-settings
  • Revision title: font-feature-settings
  • Revision id: 22289
  • Created:
  • Creator: Jdaggett
  • Is current revision? No
  • Comment 6 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"; }

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>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