font-feature-settings
The font-feature-settings
CSS property controls advanced typographic features in OpenType fonts.
Syntax
/* Use the default settings */
font-feature-settings: normal;
/* Set values for OpenType feature tags */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings: "smcp", "swsh" 2;
/* Global values */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: unset;
Whenever possible, Web authors should instead use the font-variant
shorthand property or an associated longhand property such as font-variant-ligatures
, font-variant-caps
, font-variant-east-asian
, font-variant-alternates
, font-variant-numeric
or font-variant-position
.
These lead to more effective, predictable, understandable results than font-feature-settings
, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature. In particular, font-feature-settings
shouldn't be used to enable small caps.
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 if it contains characters outside theU+20
–U+7E
codepoint range, the whole property is invalid. The value is a positive integer. The two keywordson
andoff
are synonyms for1
and0
respectively. If no value is set, the default is1
. 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.
Formal definition
Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Computed value | as specified |
Animation type | discrete |
Formal syntax
Examples
Enabling various font features
/* use small-cap alternate glyphs */
.smallcaps { font-feature-settings: "smcp" on; }
/* convert both upper and lowercase to small caps (affects punctuation also) */
.allsmallcaps { font-feature-settings: "c2sc", "smcp"; }
/* use zeros with a slash through them to differentiate from "O" */
.nicezero { font-feature-settings: "zero"; }
/* enable historical forms */
.hist { font-feature-settings: "hist"; }
/* disable common ligatures, usually on by default */
.noligs { font-feature-settings: "liga" 0; }
/* enable tabular (monospaced) figures */
td.tabular { font-feature-settings: "tnum"; }
/* enable automatic fractions */
.fractions { font-feature-settings: "frac"; }
/* use the second available swash character */
.swash { font-feature-settings: "swsh" 2; }
/* enable stylistic set 7 */
.fancystyle {
font-family: Gabriola; /* available on Windows 7, and on Mac OS */
font-feature-settings: "ss07";
}
Specifications
Specification |
---|
CSS Fonts Module Level 4 # font-feature-settings-prop |
Browser compatibility
BCD tables only load in the browser