一个文件，多种选项：在 Web 上使用可变字体

2016 年，Web 排版领域出现了一项重要发展，由 Adobe、Microsoft、Apple 和 Google 的代表共同宣布。OpenType 字体格式的 1.8 版引入了可变字体。由于有这么多大公司参与，所有浏览器都加入并积极推进实施也就不足为奇了。

字体粗细可以远不止bold和normal——大多数专业设计的字体都提供从细的hairline超细到black超粗粗体的各种变体。要使用所有这些粗细，我们需要为每个粗细提供一个单独的文件。虽然设计不太可能需要所有字体粗细，但比粗体和正常粗细更多的粗细变体可以为页面增加视觉层次和趣味性。

需要考虑的不仅仅是各种粗细。CSS3 引入了font-stretch属性，其值范围从ultra-condensed到ultra-expanded。到目前为止，只有当您为每个宽度提供单独的文件时，这些值才能起作用。如果您想要正常和斜体两种样式下粗细和宽度的每种组合，则需要数十个文件。

使用可变字体，我们可以用一个文件获得所有这些变化。

OpenType 规范列出了五个标准变化轴——全部用四个字符的字符串标记。这些是我们能够控制的字体的方面。

• wght – 粗细由 CSS font-weight属性控制。该值可以是 1 到 999 之间的任何值。这将允许更细粒度的控制。
• wdth – 宽度由 CSS font-stretch属性控制。它可以接受关键字或百分比值。虽然长期以来一直可以使用转换来scaleX或scaleY，但这会以排版师意想不到的丑陋方式扭曲字体。宽度轴由字体设计者定义，以便优雅地扩展或压缩。
• opsz – 可以使用新的font-optical-sizing属性打开或关闭光学尺寸调整。（我稍后会解释什么是光学尺寸调整。）
• ital – 斜体可以通过将 CSS font-style属性设置为italic来实现。
• slnt– 倾斜可以通过设置 CSS font-style属性设置为oblique来控制。它将默认为 20 度倾斜，但也可以接受-90deg和90deg之间的指定度数。

不幸的是，并非每个可变字体都一定会使用所有五个轴。这完全取决于特定字体的创建者。在我测试过的所有可变字体中，到目前为止，最常实现的是粗细，其次是宽度。大多数情况下，您需要两个文件：一个用于斜体，一个用于常规，因为ital轴并不总是实现。正如 Adobe 的 Frank Grießhammer 告诉我的

斜体和罗马风格具有（通常是根本性的）不同的构建原则，因此点结构可能并不总是兼容。

浏览器可以使任何非斜体字体模拟斜体，但这在排版上是不明智的。

排版师可以在他们的可变字体中定义命名实例。命名实例是一个预设——字体能够使用名称（例如“Extra Light”）而不是仅使用数字访问的特定变体。但是，在当前的 CSS 规范中，无法访问这些命名实例。需要注意的是，当您为font-stretch使用extra-condensed或semi-expanded之类的值时，该值映射到 CSS 规范中预定义的百分比——而不是字体创建者选择的任何命名实例。对于font-weight，bold值映射到700，normal映射到400。如规范所述，“字体可能在内部提供自己的映射，但字体内的这些映射会被忽略。”

CSS 字体模块级别 4 规范引入了新的font-variation-settings属性来控制可变字体选项。以下两个 CSS 声明是等效的

h1 {
  font-weight: 850;
  font-style: italic;
  font-stretch: normal;
}

h1 {
  font-variation-settings: "wght" 850, "wdth" 100, "ital" 1;
}

规范强烈建议使用font-optical-sizing、font-style、font-weight和font-stretch来控制五个标准轴中的任何一个，而不是使用font-variation-settings。正如 Myles Maxfield 友好地向我解释的那样

font-variation-settings与其他变体感知属性并不相同，因为使用这些其他属性，浏览器可以洞察变体的含义，因此可以执行诸如将它们应用于其他字体文件格式或创建合成版本（如果字体文件不支持该轴）等操作。

Microsoft 将随着时间的推移注册更多标准轴标签。随着新轴的添加，我们也可以期待新的 CSS 属性来控制它们。字体创建者也可以自由发明自己的轴。这就是为什么font-variation-settings被添加到 CSS 中的原因——它是控制自定义轴的唯一方法。Lab DJR 和 Decovar 是两种旨在展示单个可变字体能够多么灵活的字体。例如，Lab DJR 提供了四个自定义轴

h1 {
  font-variation-settings: 'SIZE' 100, 'QUAD' 80, 'BEVL' 950, 'OVAL' 210;
}

这些铸造厂定义的自定义轴必须使用大写字母，而标准化轴始终使用小写字母。对于独特且未标准化的选项，CSS 作者必须依靠字体开发人员正确记录他们的工作。

性能

您可能会下载 TTF 格式的可变字体，而不是作为预压缩文件。您肯定希望将其转换为.woff2。Google 提供了一个名为woff2的命令行工具，可以轻松实现这一点。如果您在命令行中cd到包含字体的文件夹，则可以键入

woff2_compress examplefont.ttf

我们已经确定，我们每个字体只需要一个 HTTP 请求（或者可能两个用于区分罗马和斜体样式）。因为它们做了很多工作，所以您可能会期望可变字体的文件大小远大于典型字体文件。让我们看一下（并非完全科学的）结果。

以下是我笔记本电脑上的一些可变字体，以及它们的文件大小

让我们将其与非可变版 Source Sans 的单个实例进行比较

动画

可变字体也意味着，font-weight（以及任何其他轴）可以首次进行动画处理。虽然添加文字动画听起来像是网站可以轻松生存的额外修饰，但某些操作（例如在焦点上增加粗细）似乎是一种自然而直观的方式来向用户表示状态。过去，从正常粗细切换到粗体粗细非常突兀。使用可变字体，它可以平滑且优雅。

一刀切？

虽然 Lab DJR 和 Decovar 令人兴奋且富有创意，但可变字体并非全部都与前卫的实验有关。光学尺寸调整应该为 Web 带来更好的阅读体验。目前，Web 上的字体与大小无关；您可以更改font-size，它仍然看起来相同。光学尺寸调整意味着为字体进行特定于尺寸的优化，其中字母形式在不同尺寸下的变化可以提高可读性。我们不希望较大的文本看起来不雅观或笨拙，而较小的文本则受益于去除精细细节。更开放的反白空间、细衬线的加厚以及 x 高度、宽度、粗细和字间距的增加都有助于提高较小尺寸下的可读性。初始值为auto，因此如果您使用的是利用光学尺寸调整索引的字体，则可以免费获得开箱即用的好处。

有哪些字体可用？

这项技术正在迅速进入浏览器。使用它需要您找到一个您真正想要使用的可变字体。Google Fonts 抢先体验版 有三个可用，并且可能会有更多字体陆续推出。Adobe 正在将一些最著名的字体家族（例如 Minion、Myriad、Acumin）重制为可变字体。开源字体 Source Sans 和 Source Serif 也已发布。Monotype（全球最大的排版公司之一）迄今已推出了 Avenir Next 和 Kairos Sans 的 Beta 版本。一些独立字体铸造厂也开始发布可变字体。随着所有主要的字体创建软件现在都支持可变字体，我们可以预期 2018 年可变字体的可用性将大大扩展。

使用您的字体

找到您的字体后，您需要使用 @font-face 将其包含在您的网站中。

我们不希望任何浏览器下载它们无法使用的字体。出于这个原因，我们应该在 @font-face 规则内指定格式。根据可变字体的文件类型，您可以指定 woff-variations、woff2-variations、opentype-variations 或 truetype-variations。如前所述，您应该始终使用 woff2。

@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable.woff2) format("woff2-variations"),
       url(SourceSans.woff2) format("woff2"); /* for older browsers */
       font-weight: normal; font-style: normal;
}
    
@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable-italic.woff2) format("woff2-variations"),
       url(SourceSans-italic.woff2) format("woff2");
       font-weight: normal; font-style: italic;
}

第三个 @font-face 仅在需要为不支持可变字体的浏览器提供备用粗体字体时才需要。请注意，我们使用与第一个 @font-face 规则相同的可变字体文件，因为该文件可以是粗体和普通字体。

@font-face {
  font-family: 'source sans';
  src: url(SourceSansVariable.woff2) format("woff2-variations"),
       url(SourceSans-bold.woff2) format("woff2");
       font-weight: 700; font-style: normal;
}

如果浏览器支持可变字体，则将下载并使用 SourceSansVariable.woff2 和 SourceSansVariable-italic.woff2。如果不支持，则将改为下载 SourceSans.woff2、SourceSans-bold.woff2 和 SourceSans-italic.woff2。

从这里，我们可以像平时一样在元素上应用字体。

html {
  font-family: 'source sans', Verdana, sans-serif;
}

San Francisco

虽然可变字体带来了性能优势，但“Web 安全”系统字体仍然是最有效的选项，因为字体已安装，无需下载任何内容。如果您想在无需下载任何内容的情况下使用可变字体，Apple 的 San Francisco（可能是所有系统字体中最漂亮的字体）也是一种可变字体。使用系统字体不再需要 庞大的字体栈

html {
  font-family: system-ui, -apple-system;
}

system-ui 值是访问系统字体的新的标准，而 -apple-system 是在 Firefox 上有效的非标准语法。传统上，系统字体没有提供广泛的粗细或宽度。希望随着可变字体的推出，会有更多可变字体可用，从而在无需任何 HTTP 请求的情况下获得可变字体的所有优势。

浏览器支持

可变字体已在 Chrome 和 Safari 中发布。它们已包含在 Edge 的 Insider 预览版本 中，并在 Firefox 中隐藏在功能标志后面。目前，Chrome 尚未完全实现规范的所有部分。在 Chrome 中，将可变字体与 font-style、font-stretch、font-weight 和 font-optical-sizing 结合使用不起作用，因此目前需要使用 font-variation-settings 来控制五个标准轴。在 @font-face 中将格式指定为 woff2-variations 也不受 Chrome 支持（您可以仅指定 woff2，字体仍将正常工作，但您将无法获得非可变 woff2 回退）。