CSS font-feature-settings Property
The font-feature-settings property controls over advanced typographic features in OpenType fonts. The property has two values: normal and <feature-tag-value>. "Normal" is the default value. <feature-tag-value> value is a positive integer. The two keywords "on" and "off" are synonyms for "1" and "0" respectively. If no value is specified, the initial value will be "1". For adding multiple features, the values should be followed by each other in a comma-separated list.
Many other values, besides standard ligatures, are supported by the font-feature-settings property, including small caps. In particular, font-feature-settings shouldn't be used for enabling small caps.
Some prefixes may be needed for better browser support.
| Initial Value | normal |
| Applies to | All elements. It also applies to ::first-letter and ::first-line. |
| Inherited | Yes. |
| Animatable | No. |
| Version | CSS3 |
| DOM Syntax | object.style.fontFeatureSettings = "normal"; |
Syntax¶
font-feature-settings: normal | <feature-tag-value> | initial | inherit;Example of the font-feature-settings property: ¶
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h2 {
font-family: sans-serif;
}
h3 {
font-feature-settings: "smcp" 1;
}
</style>
</head>
<body>
<h2>Font-feature-settings example</h2>
<h3>The font-feature-settings CSS property controls advanced typographic features in OpenType fonts.</h3>
</body>
</html>Values¶
| Value | Description |
|---|---|
| normal | This is the default value of this property. |
| <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. |
| initial | It makes the property use its default value. |
| inherit | It inherits the property from its parents' element. |
0 Comments
CAN FEEDBACK
Emoji