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

除了显着节省需要通过线路发送以在页面上显示文本的数据轮流之外，可变字体还支持动画或转换字体样式和自定义字体样式等功能，而静态字体则无法实现这两种功能字体。

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

可变字体示例

请注意，您需要使用支持的浏览器才能正确查看以下示例。

源无变量

Source Sans 是一种流行的免费字体，现在带有可变版本。将鼠标悬停在文本上以查看如何font-weight转换for 的值：

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

@font-face {
  font-family: 'Source Sans';
  src: url('/assets/fonts/variable/SourceSansVariable-Roman.ttf') format("truetype-variations");
  font-weight: 1 999;
}

.source-sans, .source-sans2, .source-sans3 {
  font-family: 'Source Sans';
  transition: font-weight .45s ease-out;
}

.source-sans:hover, .source-sans2:hover {
  font-weight: 999;
}
.source-sans3:hover {
  font-weight: 200;
}

---

自定义字体样式

以下是一些使用相同字体Decovar 的示例，这是一种定义自定义轴并允许使用独特风格化文本的可变字体：

这是用于此的 CSS 规则：

@font-face {
  font-family: Decovar;
  src: url('/assets/fonts/variable/DecovarAlpha-VF.subset.ttf') format("truetype-variations");
}

.decovar, .decovar2, .decovar3 {
  font-family: Decovar;
}

.decovar {
  color: var(--green3);
  font-variation-settings: "BLDA" 506.944, "TRMC" 1000, "TRMK" 324.653;
}
.decovar2 {
  color: hotpink;
  font-variation-settings: "WMX2" 580.838, "TRMB" 1000;
}
.decovar3 {
  color: rebeccapurple;
  font-variation-settings: "TRMF" 159.18, "TRME" 1000;
}

---

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

字体轴

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

• ital: 控制斜体。可以使用font-styleCSS 属性设置该值。
• opsz: 控制字体的光学大小。可以使用font-optical-sizingCSS 属性设置该值。
• slnt: 控制字体的倾斜度。可以使用font-styleCSS 属性设置该值。
• wght: 控制字体的粗细。可以使用font-weightCSS 属性设置该值。
• wdth: 控制字体的宽度。可以使用font-stretchCSS 属性设置该值。

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

标准轴可以使用众所周知的 CSS 属性wdth设置（例如：设置为font-weight），font-variation-settings否则使用新的 CSS来控制轴的值。

例如，这里我们为NobotoFlex变量字体定义了一个样式：

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

也可以像这样定义：

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

对有一个的轴使用原生 CSS 属性是个好主意。

请注意，字体不必实现所有 5 个标准轴，相反，您应该查阅字体文档以了解您可以控制哪些轴。

另请注意font-weight，与我们习惯的 100 值增量相比，如何取 1 到 999 之间的任何值。

在@font-face 中使用可变字体

在 Web 上使用可变字体涉及定义指向可变字体文件的@font-face 规则。以下是它是如何完成的简要概述，但对于跨浏览器支持，您可能需要了解一些注意事项。

例如，我们为Source Sans字体系列定义了两个版本，一个是常规版本，一个是粗体。两个版本都使用相同的可变字体文件，但不同的字体文件作为不支持可变字体的浏览器的后备：

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSans.woff2') format("woff2");
  font-weight: 400;
}

@font-face {
  font-family: 'Source Sans';
  src: url('/path/to/SourceSansVariable.woff2') format("woff2-variations");
  src: url('/path/to/SourceSansBold.woff2') format("woff2");
  font-weight: 900;
}

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

h1 {
  font-family: 'Source Sans';
  font-weight: 900;
}

h2 {
  font-family: 'Source Sans';
  font-weight: 400;
}

---

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

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

有了上面的内容，我们现在可以为font-weight属性使用 1 到 999 之间的任何值。不支持的浏览器将使用normal的 font-weight 值。

可用字体

您可以在V-fonts.com上找到并使用大多数当前可用的可变字体。几个显着开源的有Barlow，Mutador Sans，Source Sans，Amstelvar和Cabin VF。

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

TTF 转 WOFF2

字体文件通常以 TrueType 格式 ( ttf ) 提供，但对于 Web 而言，将字体文件压缩为 WOFF2 格式是一个更好的主意，以节省空间。您可以使用FontTools 之类的工具将字体文件压缩为 WOFF2。更多用户友好的 GUI 或在线工具肯定很快就会面世。

浏览器支持

对可变字体的支持已经很不错了，所以理论上你今天就可以开始使用它们了。然而，有一些需要支持的注意事项，作为CSS Fonts Module Level 4 的一部分，它们在 CSS 中的使用仍有待解决。这是目前仍在不断变化的一个很好的总结。

资源和工具

如果您想加深对在 Web 上使用可变字体的理解，这里有一些进一步的阅读材料：

• 可变字体开始由理查德·鲁特
• Web 上的可变字体简介
• 一个文件，多个选项：在 Web 上使用可变字体

这里有两个工具可让您轻松测试和查找可变字体：

• 轴心实践
• V-Fonts.com