-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
129 lines (90 loc) · 5.44 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
---
title: font-variation-settings
slug: Web/CSS/font-variation-settings
page-type: css-property
browser-compat: css.properties.font-variation-settings
---
{{CSSRef}}
The **`font-variation-settings`** CSS property provides low-level control over [variable font](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide) characteristics by letting you specify the four letter axis names of the characteristics you want to vary along with their values.
{{EmbedInteractiveExample("pages/css/font-variation-settings.html")}}
## Syntax
```css
/* 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: revert;
font-variation-settings: revert-layer;
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 consisting of a {{cssxref("<string>")}} of 4 ASCII characters followed by a {{cssxref("number")}} indicating the axis value to set. If the `<string>` has more or fewer characters or contains characters outside the U+20 - U+7E code point 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.
## Description
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. {{cssxref("font-weight")}}, {{cssxref("font-style")}}).
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. In some browsers, this is currently only true when the {{cssxref("@font-face")}} declaration includes a {{cssxref("@font-face/font-weight", "font-weight")}} range.
### 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:
<table class="standard-table">
<thead>
<tr>
<th scope="col">Axis Tag</th>
<th scope="col">CSS Property</th>
</tr>
</thead>
<tbody>
<tr>
<td>"wght"</td>
<td>{{cssxref("font-weight")}}</td>
</tr>
<tr>
<td>"wdth"</td>
<td>{{cssxref("font-stretch")}}</td>
</tr>
<tr>
<td>"slnt" (slant)</td>
<td>{{cssxref("font-style")}}: <code>oblique + angle</code></td>
</tr>
<tr>
<td>"ital"</td>
<td>{{cssxref("font-style")}}: <code>italic</code></td>
</tr>
<tr>
<td>"opsz"</td>
<td><p>{{cssxref("font-optical-sizing")}}</p></td>
</tr>
</tbody>
</table>
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 to follow this practice in any way, and some won't. The important takeaway here is that axis tags are case-sensitive.
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 before 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.
## Formal definition
{{cssinfo}}
## Formal syntax
{{csssyntax}}
## Examples
You can find a number of other variable font examples in our [Variable fonts guide](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide).
### Controlling variable font weight (wght)
You can edit the CSS in the example below to play with different font weight values. See what happens when you specify a value outside the weight range.
{{EmbedGHLiveSample("css-examples/variable-fonts/weight.html", '100%', 940)}}
### Controlling variable font slant (slnt)
You can edit the CSS in the example below to play with different font slant/oblique values.
{{EmbedGHLiveSample("css-examples/variable-fonts/slant.html", '100%', 940)}}
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- [Variable fonts guide](/en-US/docs/Web/CSS/CSS_fonts/Variable_fonts_guide)
- [OpenType font variations overview](https://learn.microsoft.com/en-us/typography/opentype/spec/otvaroverview) on microsoft.com
- [OpenType design-variation axis tag registry](https://docs.microsoft.com/typography/opentype/spec/dvaraxisreg) on microsoft.com
- [OpenType variable fonts](https://www.axis-praxis.org/) on axis-praxis.org
- [Variable fonts](https://v-fonts.com/) on v-fonts.com