Revision 22302 of font-feature-settings

  • Revision slug: CSS/font-feature-settings
  • Revision title: font-feature-settings
  • Revision id: 22302
  • Created:
  • Creator: CutenessOverload
  • Is current revision? No
  • Comment http://blogs.msdn.com/b/ie/archive/2012/05/31/windows-release-preview-the-sixth-ie10-platform-preview.aspx (This one, too, now goes unprefixed for IE.); 6 words removed

Revision Content

{{ CSSRef() }}

Summary

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

Note: Whenever possible, Web authors should use the {{ cssxref("font-variant") }} property. This property has been designed to handle special cases where no other way to enable or access an OpenType font feature does exists.

In particular, this CSS property shouldn't be used to enable small caps.
<style type="text/css"></style>
  • {{ Xref_cssinitial() }}: {{ Cssxref("normal") }}
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

font-feature-settings : normal | <feature-tag-value> [, <feature-tag-value>]*

where <feature-tag-value> is <string> [ <integer> | on | off ]?.

normal
Text is laid out using default settings.
<feature-tag-value>
When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a {{ xref_cssstring() }} of 4 ASCII characters. If it has more or less characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid.
The value is an positive integer. The two keywords on and off are synonyms for 1 and 0 respectively. If no value is set, the default is 1. For non-Boolean OpenType features (e.g. stylistic alternates), the value implies a particular glyph to be selected; for Boolean values, it is a switch.

Examples

/* 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";
}

Specificat​ions

Specification Status Comment
CSS Fonts Level 3 {{ Spec2('CSS3 Fonts') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 16.0 (see note){{ property_prefix("-webkit") }} 4.0 (2.0) (See note){{ property_prefix("-moz") }} 10.0 {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Browser notes

See Also

Revision Source

<p>{{ CSSRef() }}</p>
<h2 id="Summary">Summary</h2>
<p>The<code> font-feature-settings </code>CSS property allows control over advanced typographic features in OpenType fonts.</p>
<div class="note"><strong>Note:</strong> Whenever possible, Web authors should use the {{ cssxref("font-variant") }} property. This property has been designed to handle special cases where no other way to enable or access an OpenType font feature does exists.<br> <br> In particular, this CSS property shouldn't be used to enable small caps.</div>
<nobr>
<style type="text/css"><![CDATA[.cssprop {
  display:table;
  padding: 0.4em;
  border-left:0.15em solid;
  background-color:#eeeeff
}
.cssprop li {
 display:table-row;
 padding: 3px;
 margin:0;
}
.cssprop li dfn {
  display:table-cell;
  padding: 0 5px;
  border-bottom: none;
  cursor:inherit;
}



]]></style>
<ul class="cssprop"> <li><dfn>{{ Xref_cssinitial() }}:</dfn> {{ Cssxref("normal") }}</li> <li><dfn>Applies to:</dfn> all elements</li> <li><dfn>{{ Xref_cssinherited() }}:</dfn> yes</li> <li><dfn>Media:</dfn> {{ Xref_cssvisual() }}</li> <li><dfn>{{ Xref_csscomputed() }}:</dfn> as specified</li>
</ul>
</nobr>
<h2 id="Syntax">Syntax</h2>
<pre>font-feature-settings : normal | &lt;feature-tag-value&gt; [, &lt;feature-tag-value&gt;]*
</pre>
<p>where <code>&lt;feature-tag-value&gt;</code> is <code>&lt;string&gt; [ &lt;integer&gt; | on | off ]?</code>.</p>
<dl> <dt>normal</dt> <dd>Text is laid out using default settings.</dd> <dt><code>&lt;feature-tag-value&gt;</code></dt> <dd>When rendering text, the list of OpenType feature tag value is passed to the text layout engine to enable or disable font features. The tag is always a {{ xref_cssstring() }} of 4 ASCII characters. If it has more or less characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid.<br> The value is an positive integer. The two keywords <code>on</code> and <code>off</code> are synonyms for <code>1</code> and <code>0</code> respectively. If no value is set, the default is <code>1</code>. 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; for Boolean values, it is a switch.</dd>
</dl>
<h2 id="Examples">Examples</h2>
<pre>/* 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="Specificat​ions">Specificat​ions</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><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">CSS Fonts Level 3</a></td> <td>{{ Spec2('CSS3 Fonts') }}</td> <td> </td> </tr> </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<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>Basic support</td> <td>16.0 (see <a href="/en/CSS/font-feature-settings#B2" title="https://developer.mozilla.org/en/CSS/font-feature-settings#B2">note</a>){{ property_prefix("-webkit") }}</td> <td>4.0 (2.0) (See <a href="/en/CSS/font-feature-settings#B1" title="https://developer.mozilla.org/en/CSS/font-feature-settings#B1">note</a>){{ property_prefix("-moz") }}</td> <td>10.0</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> </tr> </tbody> </table>
</div>
<h3 id="Browser_notes">Browser notes</h3>
<ul> <li><a name="B1">From Gecko 2.0 (Firefox 4.0) to Gecko 14.0 (Firefox 14.0) inclued, Gecko supported an older syntax, slightly different from the modern one: </a><a class="external" 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>.</li> <li><a name="B2">Chrome only support this feature on Windows and Linux not on Mac OS.</a></li><a name="B2">
</a></ul><h2 id="See_Also"><a name="B2">See Also</a></h2><a name="B2">
</a><ul><a name="B2"> </a><li><a name="B2"></a><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> <li><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</li> <li><a class=" external" 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>
Revert to this revision