Gets or sets one or more values that specify glyph substitution and positioning in fonts that include OpenType layout features.
This property is read/write.
 |
Syntax
font-feature-settings: normal | feature-tag-value [, feature-tag-value ]*
Property values
normal-
Default. No change in glyph substitution or positioning occurs.
- feature-tag-value
-
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.
CSS information
| Applies To | All elements |
|---|---|
| Media | visual |
| Inherited | true |
| Initial Value | normal |
Standards information
- CSS 3 Fonts, Section 6.12
Remarks
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.
| 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 |
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.
Examples
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:
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 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;
See also
Build date: 11/29/2012
