字体变体是OpenType规范中定义的一组新特性。它允许字体文件在单个文件中包含多种字体变体，称为可变字体。这反过来又允许在Web上使用一个字体文件，可以实现多种字体样式。

除了在网络上显示文本需要轮流发送数据方面的明显节省外，可变字体还启用了动画或过渡字体样式和自定义字体样式等功能，这两种功能在静态字体中是不可能实现的。

让我们来看看一些使用可变字体的例子，然后分解如何在今天的网络上使用它们。

可变字体示例

请注意，您需要使用支持browser来正确查看下面的示例。

源SANS变量

SOURCE Sans是一种流行的免费字体，现在有一个可变版本。将鼠标悬停在文本上，查看如何转换字体-权重的值：

[CODEPEN Aligatorio XWdaGLZ]

这是通过使用一些非常简单的CSS规则来实现的：

 1@font-face {
 2  font-family: 'Source Sans';
 3  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
 4  font-weight: 1 999;
 5}
 6
 7.source-sans, .source-sans2, .source-sans3 {
 8  font-family: 'Source Sans';
 9  transition: font-weight .45s ease-out;
10}
11
12.source-sans:hover, .source-sans2:hover {
13  font-weight: 999;
14}
15.source-sans3:hover {
16  font-weight: 200;
17}

自定义字体样式

以下是一些使用相同字体的示例，Decovar，是一种可变字体，它定义了自定义轴，并允许使用唯一和带样式的文本：

[CODEPEN Aligatorio RwaZdXX]

下面是用于此目的的CSS规则：

 1@font-face {
 2  font-family: Decovar;
 3  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
 4}
 5
 6.decovar, .decovar2, .decovar3 {
 7  font-family: Decovar;
 8}
 9
10.decovar {
11  color: var(--green3);
12  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
13}
14.decovar2 {
15  color: hotpink;
16  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
17}
18.decovar3 {
19  color: rebeccapurple;
20  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
21}

现在你已经看到了一些真实的例子，让我们来回顾一些概念，以及如何在你自己的网页中使用可变字体。

==同步，由长者更正==

可变字体通过变化轴定义它们的变化。有5个标准轴：

ital：控制斜体。可以使用font-stylecss属性设置该值。
opsz：控制字体的光学大小。该值可以使用FONT-OPTIONAL-SIZINcss属性设置。
slnt：控制字体的倾斜。可以使用font-stylecss属性设置该值。
wght：控制字体的粗细。可以使用Font-Weightcss属性设置该值。
wdth：控制字体的宽度。可以使用font-retchcss属性设置该值。

字体还可以指定自定义轴，这些轴需要有一个4个字母的名称，而不是标准轴的4个字母的名称。上面演示的Decovar字体是使用多个自定义轴的字体的一个主要例子。

标准轴可以通过众所周知的css属性来设置(例如：wdth设置为font-weight)，而新的css字体-Variation-settings则用于控制其他轴的值。

例如，我们在这里定义了NobotoFlex变量Font的样式：

1h1 {
2  font-variation-settings: "BASE" 500, "SPAC" 200, "wght" 322, "HEIG" 456;
3}

也可以这样定义：

1h1 {
2  font-weight: 322
3  font-variation-settings: "BASE" 500, "SPAC" 200, "HEIG" 456;
4}

对于具有本地css属性的轴，使用原生css属性是一个好主意。

<$>[note]请注意，字体不必实现所有5个标准轴，相反，您应该查阅字体的文档以了解您可以控制的轴。<$>

<$>[注]还请注意，与我们习惯的100值递增相比，Font-Weight可以接受1到999之间的任何值。<$>

在@Font-Face中使用可变字体

在Web上使用可变字体涉及定义指向可变字体文件的@Font-rules。以下是它是如何完成的简要概述，但是有几个你可能想要了解的跨浏览器支持的caveats](https://medium.com/clear-left-thinking/how-to-use-variable-fonts-in-the-real-world-e6d73065a604)。

例如，这里我们定义了两个版本的`源三‘字体系列，一个是普通的，一个是粗体的。这两个版本使用相同的可变字体文件，但不同的字体文件作为不支持可变字体的浏览器的后备：

 1@font-face {
 2  font-family: 'Source Sans';
 3  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
 4  src: url('/path/to/SourceSans.woff2') format("woff2");
 5  font-weight: 400;
 6}
 7
 8@font-face {
 9  font-family: 'Source Sans';
10  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
11  src: url('/path/to/SourceSansBold.woff2') format("woff2");
12  font-weight: 900;
13}

现在它可以像往常一样在CSS规则中使用：

1h1 {
2  font-family: 'Source Sans';
3  font-weight: 900;
4}
5
6h2 {
7  font-family: 'Source Sans';
8  font-weight: 400;
9}

您还可以在@font-face规则中指定一个范围，以保留在常规CSS规则中使用所有可能值的能力：

1@font-face {
2  font-family: 'Source Sans';
3  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
4  src: url('/path/to/SourceSans.woff2') format("woff2");
5  font-weight: 1 999;
6}

有了上面的内容，我们现在可以使用1到999之间的任意值作为`Font-Weight‘属性。不支持的浏览器将使用正常的字体粗细。

可用字体

您可以在V-Fonts.com.)上找到并使用当前可用的大多数可变字体几个值得注意的开源软件是Barlow、Mutado Sans、Source Sans、Amstelvar和Cabin VF。

有些也可以通过Google Fonts作为抢先体验字体获得。

TTF转WOFF 2

字体文件通常是以TrueType格式(TTF)提供的，但对于Web来说，为了节省空间，将字体文件压缩为WOFF2格式要好得多。您可以使用像FontTools这样的工具将字体文件压缩为WOFF2。更多用户友好的图形用户界面或在线工具肯定很快就会出现。

浏览器支持

对可变字体的支持已经相当不错，所以理论上你今天就可以开始使用它们了。然而，在支持方面有一些警告，一些东西仍然在作为[CSS Fonts Module Level 4]的一部分在CSS中使用(https://www.w3.org/TR/css-fonts-4/)。这里有一个很好的总结，目前仍在变化。

资源和工具

如果你想扩大对在网络上使用可变字体的理解，这里有一些进一步的阅读材料：

[Variable fonts入门》，Richard Rutter
web上的可变字体简介
一个文件，多个选项：在Web上使用可变字体

这里有两个工具，可以让你轻松地测试和查找各种字体：

使用 CSS 在网络上使用可变字体