⁂通用之网

3.2 可变字体

可变字体如何把字重、宽度和光学字号变成服务于易读性、性能与读者个性化的连续调节工具。

9 min read

本页面借助 AI 辅助翻译。英文原文为权威版本。

在网页排版的头二十年里，一款字体是一组冻结的实例：常规、意大利体、粗体，预算允许的话或许再加一档细体和特黑。在它们之间做出的每一次选择，都是在固定点之间的选择。可变字体——随 2016 年的 OpenType Font Variations 引入，如今获得所有主流浏览器支持——用连续的区间取代了这些点。一个文件包含了整个设计空间，排版师、样式表或读者都可以选取其中的任意位置。

这对无障碍很重要，因为本刊建议过的许多调整——小字号下多一点字重、为低视力读者略宽的字形、恶劣条件下更结实的形态——从前除非铸字厂恰好刻制了那个实例，否则根本无法实现。如今它们只是数字。

轴

可变字体暴露具名的变化轴。OpenType 规范注册了五个：

  • wght（字重）——从极细到特黑连续可调，而非以百为步进。
  • wdth（宽度）——从紧缩到加宽，没有机械缩放的变形。
  • opsz（光学字号）——字形适配其将被阅读的字号。
  • slnt（倾斜）与 ital（意大利体）——倾斜角度与切换到真正意大利体形态的开关。
铸字厂可以添加自定义轴。对我们而言最重要的是下文讨论的 GRAD（字级）。在 CSS 中，注册轴映射到高层属性——font-weight、font-stretch、font-style 和 font-optical-sizing——应优先于低层的 font-variation-settings 使用它们，以便样式可预测地级联与组合。 五个注册的可变字体轴——wght、wdth、opsz、slnt、ital——以区间形式展示，每个轴上标出正文默认值。

光学字号：一件旧工具的回归

光学字号并不新；它非常古老，缺席于数字字体才是反常。在金属活字时代，每个字号都单独刻制，刻字匠据此补偿：小字号获得更结实的笔画、更宽的间距、更大的x字高、更开放的字怀；展示字号则获得更精细的对比和更紧的排布。照相排版继而数字字体抛弃了这一做法，用一个母版缩放到所有字号——这就是为什么那么多小号数字文本显得又细又糊。

opsz 轴恢复了这一实践。一款制作精良、带光学字号轴的可变字体，在 font-optical-sizing: auto 生效时（默认如此），会自动以健壮、开放的形态渲染图注字号的文字，以精致的形态渲染标题文字。对于生活在小而吃力那一端的低视力读者，这是直接的易读性收益，而设计师的成本只是选择一款支持它的字体。

字级：不引起回流的字重

字级轴改变笔画的深浅而不改变字形的宽度。这一区别正是全部要点：调整 font-weight 会改变字母宽度从而使文本回流，而调整字级不会。文字可以在视觉上变重或变轻，而每个换行位置纹丝不动。

上一章提到，深色表面上的浅色文字看起来比白底上的同一字体更粗。字级正是这一修正的精密仪器：在深色模式下略降字级，两个主题的表观字重便一致了，读者在两者之间切换时没有任何布局位移。字级同样适用于悬停和选中状态，以及在渲染偏重或偏轻的显示器之间做补偿。

性能即无障碍

一个曾需要六到八个字体文件的家族，如今可以只发布一到两个文件（正体与意大利体）。尽管可变文件比任何单个静态实例都大，它几乎总是小于它所取代的实例之和，且网络请求更少。对于慢速网络和普通设备上的读者——这一人群与无障碍工作所服务的读者高度重叠——这意味着盯着不可见或回退文字的时间更短，网页字体终于到达时的突兀交换也更少。子集化和现代压缩格式进一步降低了成本。

还有一个带无障碍红利的设计收益：当所有字重都可用时，设计师不再把伪粗体和伪意大利体拉来充数，也不再仅仅因为只加载了那一个文件而选择过细的字重。

个性化：更大的承诺

最深层的机会大多仍未兑现：让读者调校字体。建立在可变字体上的阅读应用或长文站点可以提供字重滑块、宽度调节、间距控制——连续、即时、可逆。觉得默认字重太细的低视力读者可以随意把它加粗，而不必在"常规"与"粗体"之间二选一。年长的读者可以把字形略微放宽。这些恰恰是低视力研究长期以来提示有帮助的调整，而可变字体让提供它们变得廉价。

这么做的网站还很少，也不存在标准的界面。但技术壁垒已经倒下，本刊的立场是：读者可调的字体正是屏幕排版应当前往的方向——设计师设定一个判断得当的默认值，读者可以偏离它。

本章为何是新增的

第一版问世时，网页根本无法可靠地嵌入字体——排版意味着在读者机器上安装的那寥寥几款字体中做选择。网页字体嵌入在 2010 年前后到来；可变字体于 2016 年被规范化，并在其后数年获得广泛的浏览器支持。样式表可以把字重指定为 435、光学字号可以经由文件中的一个轴从金属活字时代归来——这样的想法当年根本不存在，无从写起。

CSS 实践

body {
  font-optical-sizing: auto;   /* opsz: text forms at text sizes */
}

@media (prefers-color-scheme: dark) {
  /* grade trims dark-mode weight bloom without reflow */
  body { font-variation-settings: "GRAD" -20; }
}

建议

  • 新项目优先采用可变字体；发布一个正体文件和一个意大利体文件，而不是一摞静态文件。
  • 为在多种字号下排文字的界面选择带光学字号轴的字体，并让 font-optical-sizing: auto 保持生效。
  • 使用字级轴（如可用）修正深色模式下的表观字重，且不引起回流。
  • 尽可能使用高层 CSS 属性（font-weight、font-stretch），而非原始的 font-variation-settings。
  • 绝不依赖伪粗体或伪意大利体；可变文件让真正的形态触手可及。
  • 当长文阅读就是产品本身时，考虑让读者直接控制字重和宽度——并记住他们的选择。

延伸阅读