如何在 Web 上使用可变字体

您是否想知道“什么是可变字体？” 可变字体是由参与字体设计的四大科技公司——Apple、Google、Microsoft 和 adobe 共同努力开发的。 

顾名思义，可变字体允许设计人员从同一个字体文件中派生无限数量的字体变体。这样就可以根据不同的设备、视口、方向和其他设计约束来调整字体。

3 种可变字体推荐

注意：除了最后一个示例之外，这些字体都以推荐的 .woff2 格式提供（继续阅读以了解有关格式的更多信息）。要自己转换为 .woff2，您可以使用convertio.co 或 Google 的 woff2等工具。

1.  Knicknack  (OTF, WOFF)

这种 OpenType 可变字体具有两种样式和至少五个粗细。它带有一个可变字体大小滑块来控制字体的重量。 

2. 制造商（ OTF  、TTF、WOFF）

Manufacture 勤劳、坚韧、强大，为自己挺身而出。这种优质可变字体的灵感来自旧铸铁标志。现代的 MANUFAKTUR 现在是一种 OpenType 可变字体，具有数千种宽度和粗细组合。您可以通过滑块或代码控制可变的字体大小、宽度和粗细。

MANUFAKTUR 包括：

• 5 个粗细（Light、Medium、Bold、Extra Bold 和 Black）

• 3 种宽度（普通、扩展和超扩展）

• 3 种样式（普通、斜体和粗略） 

3.  Figuera 可变字体 （OTF、TTF、WOFF）

Figuera 是一种细致的装饰字体，有许多变体，您可以根据自己的喜好进行控制。这种可变字体的灵感来自于维多利亚时代的衬线字体样式。您可以在可用字体文件中创建自定义可变字体大小、宽度和粗细。

为什么使用可变字体

可变字体显着减少了当前字体格式的限制。今天的网络字体不灵活，不能很好地缩放；它们只为我们提供了一些固定的样式，名称为“Light”、“Bold”或“Extra Bold”。 

甚至有些字体只有一种粗细或倾斜变体。然而，通过可变方法，我们可以获得重量、倾斜度、x 高度、平板、舍入和其他印刷属性的无限灵活性。

更好的是，它们提高了性能。我们所知道的 Web 字体需要将每个字体变体存储在单独的文件中。例如，这是Roboto网络字体文件夹的外观：

可变字体使用浏览器只需加载一次的单个字体文件。加载后，它可以从一个二进制文件中提供所有变体。 

所以这里有一个简单的比较：

• Roboto：十二个字体文件，十二个变体

• 可变字体：一个字体文件，无限变体

正如您已经想象的那样，我们的印刷选择随着这种更新的方法而增长得令人难以置信。从实用选项到微妙，一直到更多……实验！

我希望你不介意我吹嘘自己的喇叭，但还有一种名为...的可变颜色字体的光荣开创性工作。Poo 先生：https ://t.co/aE2qWE69Cm pic.twitter.com/X3ylXzqtnT

— Roel Nieskens (@PixelAmbacht) 2018 年 5 月 8 日

从 OTF 和 TTF 到 WOFF 字体格式

那么可变字体使用什么文件格式呢？在早期，它们是作为 OpenType 字体格式的一部分创建的：

“OpenType 字体可能具有扩展名 .OTF 或 .TTF，具体取决于字体中的轮廓类型以及创建者希望在没有原生 OpenType 支持的系统上兼容的愿望。” –微软文档

为了完全准确，在 OpenType 字体文件规范1.8 版中引入了包含变体的功能。OpenType 是 TrueType 字体格式的扩展，因此可变字体可以作为.otf文件使用.ttf。

然而，现在大多数可变字体都打包为WOFF2字体（WOFF2 是 WOFF 的推荐升级版本）。这些仍然是 OTF 或 TTF 字体，但使用特定的网络安全压缩技术。WOFF 是 Mozilla 基金会、微软和 Opera Software 合作的结果。

“WOFF 文件是 OpenType 或 TrueType 字体，应用了特定格式的压缩并添加了额外的 XML 元数据。” –维基百科

正如我们在上面的可下载示例中提到的，并非所有字体包都包含 .woff 或 .woff2 格式。

“您可以下载 TTF 格式的可变字体，而不是预压缩文件。您肯定希望将其转换为 .woff2。谷歌提供了一个可以预见的名为woff2的命令行工具来简化它。” ——奥利·威廉姆斯

什么是设计轴？

根据 Adobe Typekit 博客，随着这些新规范的出现，字体变体使我们能够沿多个设计轴（多达 64,000 个）插入字体。

OpenType 1.8 规范定义了五个已注册的轴标签：

1. 重量<wght>

2. 宽度<wdth>

3. 光学尺寸<opsz>

4. 倾斜<slnt>

5. 斜体<ital>

此外，字体设计者还可以在字体文件的“名称”表中定义自定义轴以及他们自己的四字符标签。

下面，您可以看到设计轴如何工作的一个很好的说明（来自John Hudson 在 Medium.com 上的文章，Typekit将其称为可变字体的非官方公告）。它演示了一个具有重量、宽度和光学尺寸轴的三轴可变字体：

中间的红色字形代表存储在字体中的轮廓集，绿色字形代表三个轴的极值，橙色字形代表角位置。 

如果我们使用这种三轴可变字体，整个立方体代表我们可以访问的设计空间。它只是一个立方体，因为字体具有三个维度（重量、宽度、光学尺寸）。使用更少的轴，我们将向下移动到一个矩形（2 轴）或一条线（1 轴），使用更多的轴，我们将向上移动到一个多维超空间。 

当然，现实生活中的 3 轴可变字体不一定是立方体，而更可能是长方体，因为在大多数情况下，不同轴的长度不同。

命名实例

可变字体仍然允许字体设计者在无限数量的选项中定义命名实例——特定的字体变体。例如，Adobe 的可变字体原型包含两个轴（粗细和对比度）和八个命名实例（Extra Light、Light、Regular、Semibold、Bold、Black、Black Medium Contrast、Black High Contrast）。

如果我们想在 Adobe illustrator 等设计程序中使用可变字体，则命名实例更为重要。在网络上，我们可以很容易地使用 css 生成任何实例（命名或未命名）（例如，在 Adobe 可变字体中，Extra Light 命名实例采用权重和对比度轴的最小值）。 

如何将可变字体添加到网页

 我们可以使用CSS 文件顶部的@font-face 规则将这些字体添加到网站。

例如，我们可以使用以下 CSS 规则添加 FF Meta 变量字体：

您可以在Axis Praxis网站、v-fonts.com 、不同字体设计公司（例如Type Network ）的 GitHub 页面上找到更多示例，Typekit 也开始发布他们最受欢迎的 Adob e Originals 的可变字体版本家庭。

上面的 FF Meta 示例由 Jason Pamental 在 CodePen 上进一步开发。

注意：并非您在 Web 上找到的所有 OpenType 字体都是可变字体（它们仅在 1.8 版中引入）。

如何使用 CSS 设置字体变化

要定义字体变体，我们可以使用CSS Font Module Level 4font-variation-settings引入的 CSS 属性。这是一个低级属性，允许我们通过为每个轴指定一个值来控制输出。

示例：Decovar

Decovar 是目前存在的最通用的示例之一。你可以在Axis Praxis和GitHub 上找到它，它还在 TypeNetwork 的网站上有一个演示页面。Decovar 包含一个注册（权重）和14 个自定义轴，并且还有 17 个命名实例。

从 Decovar 的 GitHub 文档中，我们可以使用这种 15 轴可变字体实现以下变体：

在 CSS 中，我们必须定义所有 15 个轴（内联、剪切、圆形平板、条纹、蠕虫终端、内联骨架、开放内联终端、内联终端、蠕虫、重量、喇叭形、圆形、蠕虫骨架、平板、分叉）。

div {

    font-family: Decovar;

    color: white;

    background-color: rgb(0, 162, 215);

    font-size: 157.12px;

    text-align: left;

    padding-top: 20px;

    font-variation-settings: 'INLN' 285.094, 'TSHR' 346.594,

        'TRSB' 786.377, 'SSTR' 84.268, 'TWRM' 200, 'SINL' 84.268,

        'TOIL' 0, 'TINL' 91.983, 'WORM' 0, 'wght' 400, 'TFLR' 0,

        'TRND' 0, 'SWRM' 0, 'TSLB' 277.155, 'TBIF' 0;

}

注意：我们必须为属性中的所有轴指定一个值font-variation-settings——即使是那些我们不想使用的轴。 

我们可以为最小值和最大值之间的轴使用任何值（甚至是浮点数）。

在 Decovar 的情况下，我们可以将0其用作我们不感兴趣的轴的值；这些将使用默认值呈现。但是，情况并非总是如此，因为它取决于字体用于不同轴的范围。Decovar 很简单，因为它对所有轴使用 0-1000 范围，并且 0 是所有轴的默认值。

上面的 CSS 生成以下字体变体：

查找可用范围

但是，您在哪里可以找到范围？字体文件包含 保存必要数据的字体变体 (fvar) 表。但是，要访问该信息，我们需要使用 FontView等工具查看字体文件的内容。有时字体的文档包含范围，但不幸的是并非总是如此。

高级 CSS 属性

该font-variation-settings属性是低级属性，根据 W3C 的建议 ，只有在其他方法不可用时才应使用它。这到底是什么意思？

根据CSS 4 规范，未来我们将能够使用更高级别的 CSS 属性来控制已注册的轴，即：

1. font-weight（将控制wght轴）

2. font-stretch（将控制wdth轴）

3. font-style（将控制slnt和ital轴）

4. font-optical-sizing（将控制opsz轴）

前三个属性自 CSS2 以来就存在，但 CSS4 规范扩展了它们的用途。我们不仅可以将它们与预定义的关键字（例如normal或boldfor font-weight）或整数（例如400、600、800等）一起使用，还可以将它们与预定义比例的所有数字一起使用（例如， font-weight范围在 1 到 1000 之间，以及font-stretch将介于 50% 和 200% 之间）。

不过，这些功能仍处于试验阶段。所以现在，合理的做法是继续使用 font-variation-settings，因为目前这是访问可变字体轴的最稳定的属性。

支持

可变字体仍然相对较新，但 浏览器支持已经出现。自 2017 年 10 月发布以来，photoshop和Illustrator也支持它们。

了解有关可变字体的更多信息

我们可以期待这种新方法会给网络排版世界带来令人难以置信的变化。随着它获得越来越多的支持，是时候投入到学习和实验中了。