CSS font-feature-settings Property
Example
Specify font-feature-settings:
/* enable small-caps */
.ex1 { font-feature-settings: "smcp" on; }
/* convert both upper and lowercase to small caps */
.ex2 {
font-feature-settings: "c2sc", "smcp"; }
/* no common ligatures */
.ex3 { font-feature-settings: "liga" 0; }
/* enable automatic
fractions */
.ex4 { font-feature-settings: "frac"; }
Try it Yourself »
Definition and Usage
The font-feature-settings property allows control over advanced typographic features in OpenType fonts.
| Default value: | normal |
|---|---|
| Inherited: | yes |
| Animatable: | no. Read about animatable |
| Version: | CSS3 |
| JavaScript syntax: | object.style.fontFeatureSettings="normal" |
Browser Support
The numbers in the table specify the first browser version that fully supports the property.
Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.
| Property | |||||
|---|---|---|---|---|---|
| font-feature-settings | 48.0 16.0 -webkit- |
10.0 | 34.0 15.0 -moz- |
9.1 | 35.0 15.0 -webkit- |
CSS Syntax
font-feature-settings: normal|feature-value;
Property Values
| Value | Description | Demo |
|---|---|---|
| normal | Default. Use the default settings to lay out text | Demo ❯ |
| feature-value | Format: string [1|0|on|off] Always a string of 4 ASCII characters. | Demo ❯ |
