Nasi wolontariusze nie przetłumaczyli jeszcze tego artykułu na język Polski. Dołącz do nas i pomóż go przetłumaczyć!
Można także przeczytać artykuł w języku: English (US).

The font-variation-settings CSS property provides low-level control over variable font characteristics, by specifying the four letter axis names of the characteristics you want to vary, along with their values.

Note: This property is a low-level mechanism designed to set variable font features where no other way to enable or access those features exist. You should only use it when no basic properties exist to set those features (e.g. font-weight, font-style).
Note: font characteristics set using font-variation-settings will always override those set using the corresponding basic font properties, e.g. font-weight, no matter where they appear in the cascade.

Syntax

/* Use the default settings */
font-variation-settings: normal;

/* Set values for variable font axis names */
font-variation-settings: "XHGT" 0.7;

/* Global values */
font-variation-settings: inherit;
font-variation-settings: initial;
font-variation-settings: unset;

Values

This property's value can take one of two forms:

normal
Text is laid out using default settings.
<string> <number>
When rendering text, the list of variable font axis names is passed to the text layout engine to enable or disable font features. Each setting is always one or more pairs comprised of a <string> of 4 ASCII characters followed by a <number> indicating the axis value to set. 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, depending on the value range available in your font, as defined by the font designer.

Formal syntax

normal | [ <string> <number> ]#

Registered and custom axes

Variable font axes come in two types: registered and custom.

Registered axes are the most commonly encountered — common enough that the authors of the specification felt they were worth standardizing. Note that this doesn't mean that the author has to include all of these in their font.

Here are the registered axes along with their corresponding CSS properties:

Axis Tag CSS Property
"wght" font-weight
"wdth" font-stretch
"slnt" (slant) font-style: oblique + angle
"ital" font-style: italic
"opsz"

font-optical-sizing

Custom axes can be anything the font designer wants to vary in their font, for example ascender or descender heights, the size of serifs, or anything else they can imagine. Any axis can be used as long as it is given a unique 4-character axis. Some will end up becoming more common, and may even become registered over time.

Note: Registered axis tags are identified using lower-case tags, whereas custom axes should be given upper-case tags. Note that font designers aren't forced follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.

Examples

See below for interactive examples demonstrating the registered axes. You can find a number of other variable fonts examples at our Variable fonts guide, v-fonts.com, and axis-praxis.org.

Warning: In order to use variable fonts on your operating system, you need to make sure that it is up to date. For example Linux OSes need the latest Linux Freetype version, and macOS prior to 10.13 does not support variable fonts. If your operating system is not up to date, you will not be able to use variable fonts in web pages or the Firefox Developer Tools.

Weight (wght)

The following live example's CSS can be edited to allow you to play with font weight values.

Slant (slnt)

The following live example's CSS can be edited to allow you to play with font slant/oblique values.

Specifications

Specification Status Comment
CSS Fonts Module Level 4
The definition of 'font-variation-settings' in that specification.
Working Draft Initial definition

Initial valuenormal
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedyes
Mediavisual
Computed valueas specified
Animation typea transform
Canonical orderper grammar

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 62Edge Full support 17Firefox Full support 62
Full support 62
No support 53 — 62
Disabled
Disabled From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 49Safari Full support 11
Notes
Full support 11
Notes
Notes Requires macOS 10.13 High Sierra or later.
WebView Android Full support 62Chrome Android Full support 62Edge Mobile Full support 17Firefox Android Full support 62
Full support 62
No support 53 — 62
Disabled
Disabled From version 53 until version 62 (exclusive): this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 49Safari iOS Full support 11
Notes
Full support 11
Notes
Notes Requires iOS 11 or later.
Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

See also

Autorzy i etykiety dokumentu

Ostatnia aktualizacja: SphinxKnight,