The font-variation-settings
CSS property provides low-level control over OpenType or TrueType font variations, by specifying the four letter axis names of the features you want to vary, along with their variation values.
/* Use the default settings */ font-variation-settings: normal; /* Set values for OpenType axis names */ font-variation-settings: "XHGT" 0.7; /* Global values */ font-variation-settings: inherit; font-variation-settings: initial; font-variation-settings: unset;
This works at an even lower level than font-feature-settings
, which instead allows you to specify font feature tags and values.
Note: Whenever possible, Web authors should use other methods of controlling font display, like the
font-variant
shorthand property or an associated longhand property. This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.Initial value | normal |
---|---|
Applies to | all elements. It also applies to ::first-letter and ::first-line . |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | a transform |
Canonical order | per grammar |
Syntax
This property can take one of two forms:
- The keyword value
normal
- A
<string>
followed by a<number>
. This may be repeated, with the<string> <number>
tuples separated by commas.
Values
normal
- Text is laid out using default settings.
<string> <number>
- When rendering text, the list of OpenType axis names is passed to the text layout engine to enable or disable font features. Each setting is always a
<string>
of 4 ASCII characters, followed by a<number>
indicating the axis value. If the<string>
has more or fewer characters or contains characters outside the U+20 - U+7E codepoint range, the whole property is invalid. The<number>
can be fractional or negative.
Formal syntax
normal | [ <string> <number> ]#
Examples
TBD
Specifications
Specification | Status | Comment |
---|---|---|
CSS Fonts Module Level 4 The definition of 'font-variation-settings' in that specification. |
Editor's Draft | Initial definition |
Browser compatibility
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|---|
Basic support |
59.0. |
? |
53.0 (53.0) |
? | ? | ? |
Feature | Android | Android Webview | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|---|---|
Basic support | ? | ? | ? | ? |
53.0 (53.0) |
? | ? | ? |
See also
Document Tags and Contributors
Tags:
Contributors to this page:
mfluehr,
KrasnayaPloshchad,
Siilwyn,
sergejr,
wbamberg,
behnam,
chrisdavidmills
Last updated by:
mfluehr,