Web 上的可变字体

今年，在华沙举行的 ATypI 字体大会上，来自 Adobe、微软、苹果和 Google 的代表展示了字体排版方面一项激动人心的发展：支持 OpenType 字体中的可变字体。字体变化通过一个示例最能体现。

这里，您可以看到 San Francisco 字体在 iOS 上粗细变化的动画效果。正如您所看到的，字重是连续插值的，这使得该字体可以在现有字重之间实现更多字重。 （您可以在 macOS Sierra 上仅使用 Safari 技术预览版 在此处 尝试。）

然而，字体变化不仅限于改变字体的粗细。一个字体可以公开任意数量的轴，每个轴控制字体的一个不同方面。用户（或浏览器）可以选择一个浮点值应用于每个轴，每个值都会影响字体的最终外观。

除了对字体外观进行更精细的控制之外，如果使用同一字体系列的多个字形，字体变体还可以提高网站的加载性能。目前，一个网站可能会独立加载两种字重的字体，这可能导致大量数据重复。相反，网站可以选择使用字体变体，并简单地将不同的变体值应用于同一个字体，从而消除重复数据，只需下载单个字体。

即使只有两个轴（粗细和宽度），单个字体也可以用于各种排版场景。反复使用同一个字体文件，并应用不同的变体，可以显著缩短网站的加载时间。 （您可以在 macOS Sierra 上仅使用 Safari 技术预览版 在此处 查看此示例。）

CSS

W3C 目前正在 起草 一种在 CSS 中描述变体轴值的方式。当前草案将轴分为三组：字体选择、常用和其他。

有四个 CSS 属性会影响文档中选用的字体：font-weight、font-stretch、font-style 和 font-size。通过字体变体支持，这四个属性中的每一个都将接受一个数值，该数值既会影响字体选择，又会在字体选中后应用于该字体。因此，一个声明 font-weight: bold 的网站可能会导致选择可变字体，然后将粗体应用于该可变字体。自然地，所有这些属性都支持 CSS 动画，因为值可以平滑插值。这些属性预计将与最常见的变体轴匹配，因此大多数 CSS 作者无需学习任何新属性。

font-weight: 791; /* 700 和 800 之间的中间值。*/

除了上述属性之外，任何知名或常用的变体轴都将拥有自己的 CSS 属性。目前，此组中只有一个轴：optical-sizing。随着新的变体轴变得流行，将添加新属性来控制这些轴。

最后，字体创作者可能希望包含不常见或不为人知的轴。在这种情况下，网页作者应该能够在不要求浏览器实现新 CSS 属性的情况下设置这些轴。因此，最低级别的 font-variation-settings CSS 属性允许网页作者将轴名称指定为 CSS 值以及其关联的变体值。与其它属性类似，font-variation-settings 也支持 CSS 动画。由于此属性仅作为在没有更高级别属性时使用的“逃生舱”，因此它应该很少使用，甚至从不使用。

font-variation-settings: "XHGT" 0.7;

实现

虽然上述公告是关于 OpenType 字体中的变体支持，但 TrueType 已经 支持变体 多年。事实上，苹果目前出货的所有操作系统都包含用于 TrueType 字体变体的 系统 API。正因如此，我已开始 在 WebKit 中实现 字体变体支持，这与平台中现有的 TrueType 字体支持有关。目前，我只 实现了 最低级别的 font-variation-settings 属性，但我非常期待尽快实现完整的支持。请在 macOS Sierra 上使用 Safari 技术预览版 试用现有支持，并告诉我您的使用体验！

如果您有任何问题或意见，请通过 @Litherum 联系我，或通过 @jonathandavis 或 web-evangelist@apple.com 联系 Apple 的 Web 技术推广大使 Jonathan Davis。