网络上的可变字体

什么是可变字体？

正常与变量

可变字体是一种相对较新的网页字体样式和显示方式。本文将概述这项技术，探讨其优缺点和用例。

它还将讨论普通字体和可变字体之间的区别，并涵盖相关问题，如浏览器支持和在哪里可以找到可变字体。

重要提示：要尝试下面的演示，您需要使用现代且更新的网络浏览器！

什么是可变字体？

可变字体是 Apple、Google、Microsoft 和 Adob​​e 共同努力的结果，可以从一个字体文件中派生出无限数量的字体变体。

由于该计划得到了大公司的支持，因此在浏览器中的适应和实施速度相对较快。

正常与变量

普通字体

字体可以有不同的变体。例如，下面的 Roboto 系列包含 12 种不同的变体。此外，还有一个精简版本，包含 6 种变体。

每个变体通常都有自己的名称，例如“Light”或“Bold”。这些名称不仅描述了字体变体，还决定了字体的宽度（介于 1 到 999 之间的值）和粗细（介于 50 到 200 之间的百分比值）。使用普通字体时，用户只能访问每个预定义的变体。

要在网站上使用字体变体，必须将其添加到网站中。添加字体变体会增加网站的权重，因为字体变体本身就是一个需要网站访问者下载的文件。增加网站的权重会对其性能（网站加载速度）产生负面影响。因此，通常只会在网站上添加几个字体变体。例如，如果添加上述 Roboto 字体的全部 12 种不同变体，则会对网站的加载时间产生非常不利的影响。

只能使用几种字体变体而不是全套字体有时会阻碍或限制网页设计师的创造力。

可变字体

可变字体将所有字体变体的信息包含在一个文件中。可变字体不会将字体变体的值限制为与特定字重（例如“Light”或“Bold”）对应的值，而是允许用户访问所有字重值（在特定字体的定义范围内）。

可变字体还可以包含多种属性的变体。例如，Roboto 的可变版本可以包含 12 个预定义变体之间的所有可能粗细，以及 Roboto Condensed 的 6 个定义版本之间的所有可能宽度。

因此，可变字体可以访问更多字体样式，从而带来更广泛的设计多样性。由于设计师不再局限于特定的预定义样式/变体，因此更容易对字体进行微调和调整，以适应各种目的和情况。

性能
即使可变字体文件的重量相当大，但与加载所有单独的字体变体文件相比，它会更轻（如前面的 Roboto 和 Roboto Condensed 示例）。

对于使用多种不同字体变体的网站，使用可变字体可以提升其性能。然而，建议确保字体文件尽可能小，因为可变字体文件中包含的数据量必然会导致文件体积过大。

性能提升还可以体现在感知性能方面。例如，由于可变字体中的所有字体变体同时加载，网页加载速度似乎更快。因此，从浏览器渲染伪粗体到实际字体变体加载完成，不会出现任何突然的“跳跃”。

光学尺寸调整
除了性能提升外，可变字体还可以包含字体变体，根据字体大小略微变化以提高可读性。可变字体文件可以根据查看条件（例如设备类型、视口大小、方向和其他设计约束）进行调整，以呈现不同的效果。此功能称为光学尺寸调整。截至撰写本文时，此功能仅在最新版本的 Firefox 中完全支持。

自定义轴
可变字体还可以拥有自定义功能轴，由字体设计师自行设计。例如，自定义轴可以控制轮廓字体中线条的粗细。

浏览器支持

主流浏览器的最新版本均支持可变字体：Edge、Firefox、Chrome、Safari iOS、Safari、Android 和 Opera。请注意，某些平台需要 MacOS 10.13 或更高版本。

目前，该功能在大多数现代浏览器中可用，并支持大约 78% 的用户。

对于不支持的浏览器，请考虑加载备用字体。想了解更多关于
如何在 Web 上实现可变字体的信息，请访问我们的技术博客，并阅读“如何在 Web 上实现可变字体”一文。

在哪里可以找到可变字体？

目前可变字体还不是很多，但随着技术的普及，其数量可能会增加。

• Axis-praxis是一个展示和使用可变字体的网站。
• v-fonts.com是另一个致力于查找和尝试可变字体的在线资源。
• 这是一份Google 文档，列出了可用的可变字体及其相关信息。

定价：
与普通字体系列一样，可变字体可以在不同的许可下发布。由于可变字体包含创建所有可能的字体变体的信息，因此其定价可能与整个字体系列的价格相似。

最初发表于redonion.se。