CSS font-feature-settings Property
The font-feature-settings property controls advanced typographic features in OpenType fonts. The property accepts normal or one or more <feature-tag-value> pairs. normal is the default value. Each <feature-tag-value> consists of a string (the OpenType feature tag) followed by an integer (the activation value). The keywords on and off are synonyms for 1 and 0 respectively. If no value is specified, the initial value is normal. Multiple features can be specified as a comma-separated list.
Many other values, besides standard ligatures, are supported by the font-feature-settings property, including small caps. However, the font-variant: small-caps property is the standard method for enabling them, so font-feature-settings should not be used for this purpose.
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
Syntax of CSS font-feature-settings Property
font-feature-settings: normal | <feature-tag-value># | initial | inherit;Example of the font-feature-settings property:
Example of CSS font-feature-settings Property with smcp value
<!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. |
Practice
What is the font-feature-settings CSS property used for?