Fonts
Web typography takes a big step forward with support for low-level control over OpenType layout features in Internet Explorer 10 and Windows apps using JavaScript. The font-feature-settings property, defined in Section 6.12 of the World Wide Web Consortium (W3C)'s CSS Fonts Module Level 3 specification, enables you to specify glyph substitution and positioning in fonts that include Microsoft OpenType layout features.
This topic contains the following sections:
- Typographic features
- Implementing OpenType layout features
- Related topics
Typographic features
The OpenType specification defines many advanced typographic features that can be implemented by font designers. For instance, you can define vertical positioning for a font, substitute glyph forms with ligatures, contextual alternates, stylistic alternates, or swashes, include a set of small caps, and more.
Each defined feature has a corresponding feature tag that identifies its function and effects. Font developers can also define their own features. By examining a feature's tag, Internet Explorer 10 and Windows apps using JavaScript determine what the feature does and whether to implement it. The following table lists some of the most common feature tags and their definitions. The full list of OpenType layout features are listed in the OpenType layout feature tag registry.
| Tag | Description |
|---|---|
kern |
Kerning |
smcp |
Small capitals |
liga |
Standard ligatures |
dlig |
Discretionary ligatures |
ss01, ss02, ss03 ... ss20 |
Stylistic sets (font-specific) |
swsh |
Swash |
tnum |
Tabular figures |
lnum |
Lining figures |
onum |
Oldstyle figures |
Note If you are unfamiliar with the font features listed in this table, the CSS Fonts Module Level 3 specification has good explanations and visual examples of each of these in Section 6, "Font feature properties." Be aware that, though the properties listed correspond to OpenType layout features that might be supported in Internet Explorer 10 and Windows apps using JavaScript, the properties themselves (font-kerning, font-variant-*, and so on) are not supported.
Implementing OpenType layout features
To use OpenType layout features, you must first be using a font that has one or more features included. For more information about enabling advanced type design, including font linking and supported font formats, see How to Enhance Your Website's Type Design with CSS3.
After you've set up font linking using a font that has OpenType layout features built in, you implement these features using the font-feature-settings property. In Internet Explorer 10 and Windows apps using JavaScript, the syntax for this property is as follows, where "feat" represents an OpenType layout feature tag:
font-feature-settings: "feat" 1;
The "1" value following the feature tag is a Boolean toggle. If no value is specified, the declaration is treated as if a "1" followed the tag. A "0" value toggles the tag off.
For instance, if you wanted to enable discretionary ligatures on a font that includes them, you would apply the following declaration to the appropriate selector:
font-feature-settings: "dlig" 1;
To implement multiple OpenType font features on a selection of text, you simply list each corresponding tag and its toggle, and separate them with commas.
font-feature-settings: "dlig" 1, "ss02" 1, "case" 1;
At this writing, the only other browser to support OpenType layout features is Mozilla Firefox, and its syntax is slightly different from the one supported in Internet Explorer 10 and Windows apps using JavaScript. For more information, see CSS Reference: Mozilla Extensions. Be aware that, as CSS Fonts Module Level 3 is developed, its syntax might change.
Note The version of this property using a vendor prefix, -ms-font-feature-settings, has been deprecated. To ensure compatibility in the future, applications using this property with a vendor prefix should be updated accordingly.