Specifies one or more values that specify glyph substitution and positioning in fonts that include OpenType layout features.
This property is read/write.
font-feature-settings: normal | feature-tag-value [, feature-tag-value ]*
Default. No change in glyph substitution or positioning occurs.
Comma-separated list of one or more OpenType layout feature tags (each with an optional toggle). See Remarks for examples of correct syntax, plus a table of the most common feature tags and their definitions.
|Applies To||All elements|
- CSS 3 Fonts, Section 6.12
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.
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. A feature's tag determines what the feature does and whether to implement it. The following table lists some of the most common feature tags and their definitions. For the full list of OpenType layout features, see OpenType layout feature tag registry.
|ss01, ss02, ss03 ... ss20||Stylistic sets (font-specific)|
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 feature in Section 6, "Font feature properties." Be aware that, though the properties listed correspond to OpenType layout features that might be supported, the properties themselves (font-kerning, font-variant-*, and so on) are not supported.
To use OpenType layout features, you must first be using a font that has one or more features included. For more info 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. The syntax for this property is as follows, where "feat" represents an OpenType layout feature tag:
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 apply the following declaration to the appropriate selector:
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.