The font-feature-settings CSS property allows control over advanced typographic features in OpenType fonts.
Note: Whenever possible, Web authors should use the 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.
Initialnormal
Applies toall elements
Inheritedyes
Mediavisual
Computed Valueas specified
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar
Syntax
Formal syntax: normal | <feature-tag-value>#
font-feature-settings: normal
font-feature-settings: "smcp"
font-feature-settings: "smcp" on
font-feature-settings: "swsh" 2
font-feature-settings: "smcp", "swsh" 2
font-feature-settings: inherit
Values
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 <string> 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
01
/* use small-cap alternate glyphs */
02
.smallcaps { font-feature-settings: "smcp"on; }
03
/* convert both upper and lowercase to small caps (affects punctuation also) */
