跳到正文

从活字到字体源码(6):可变字体把变化装进一个文件

从活字到字体源码

  1. 字形怎样学会复用
  2. 中文字体走进现代出版
  3. 西文字体穿过机器时代
  4. 那些熟悉的字体从哪里来
  5. 字体从像素格走向轮廓
  6. 可变字体把变化装进一个文件(当前)
  7. 连字让源码换一种读法
  8. 字体源码藏在哪些文件里
  9. Ligconsolata Next 的连字改造
  10. AI 改字体时到底在做什么
  11. 不会字体设计,也能看懂字体改动

Regular、Bold、Condensed 可以分别装在多个字体文件里,也可以成为同一个可变字体中的位置。后者允许使用者在设计范围内选择中间值,比如比 Regular 稍粗、又不到 Bold 的字重。

可变字体把变化组织成设计轴。轴名、范围、默认值与轮廓变化共同决定一个实例,所以一个文件背后仍然可能有多份设计源。

轴给出位置,变化数据给出形态

OpenType 的 variations 概览解释了沿设计轴连续变化的机制。常见注册轴包括字重 wght、字宽 wdth、倾斜 slnt 和光学尺寸 opsz;具体字体支持哪些轴,要看它自己的数据。

Ligconsolata Next 继承了 Inconsolata 的字重与字宽设计空间。当前样本的范围是 wght=100…900、wdth=50…200,默认位置为 400 / 100。下面的矩阵从字体实际轮廓生成,横向改变字宽,纵向改变字重。

Ligconsolata Next 在三个字宽与三个字重位置上的真实轮廓

每个格子展示同一段 a = b。加重会改变笔画,收窄会改变推进宽度;两种变化都来自字体数据,图中没有把某张截图横向拉伸。

Master 是设计样本,插值连接它们

master 是设计空间中有明确位置的一份源设计。它提供轮廓、部件和尺寸数据,构建工具据此生成变化信息。它与用户菜单里的命名实例并不总是一一对应。

轮廓插值需要能对应的结构,例如点与轮廓的顺序。两个 master 都像一个 a,并不意味着它们天然能够正确插值。对应关系不稳,中间位置就可能扭曲或出现部件冲突。

这也是「自动加粗」与可变字体设计之间的差别。可变字体可以针对细、粗、窄、宽位置调整字形,再让中间值沿设计空间变化;它并不替设计者决定什么形态可读。Glyphs 的 Multiple Masters 章节说明了源设计的组织方式。

在网页里选一个实例

字体资源声明了相应轴以后,可以通过 CSS 选择位置。下面是样式示例,前提是页面已加载 Ligconsolata Next 可变字体:

.code-sample {
  font-family: "Ligconsolata Next", monospace;
  font-variation-settings: "wght" 650, "wdth" 92;
}

650 / 92 是设计空间中的坐标,效果取决于实际字体。一般页面也可使用 font-weight、font-stretch 等高层属性,相关映射需要 @font-face 正确声明范围,详见 CSS Fonts 的可变字体说明。

光学尺寸调整的是观看条件

opsz 让设计随目标字号变化。小字号可能需要更开阔的内部空间与更明确的细节,大字号则可能保留更细腻的对比和间距。具体方向由字体决定,不能把它简化成固定的放大缩小公式。

Ligconsolata Next 当前样本只有 wght、wdth,没有 opsz。介绍注册轴,是为了认识可变字体的能力范围;不能据此把每条轴都写成当前项目已经支持。

等宽约束要在每个位置重新成立

字宽轴允许整套网格改变宽度。在同一个实例内,普通 Latin 字符仍需遵守一致的 cell 宽度,而连字的总推进宽度应等于原字符之和。

默认位置的一格为 500 font units,=> 是 1000;最窄位置的一格为 250,最宽位置为 1000。这里的等宽关系随实例成立,不能把默认位置的 1000 当作所有轴位置的固定常量。

新连字因此需要检查多个 master 和中间位置。Regular 的端点间隙正常,不代表粗字重不会粘连;窄体的箭头能辨认,也不代表宽体重心合适。当前矩阵呈现的是几何样本,实际编辑器的小字号渲染还需另外检查。

总结

可变字体用轴与变化数据描述连续的设计空间,减少离散文件限制,也增加插值和边界检查。对等宽代码字体来说,笔画可以变粗,网格可以变窄,但每个实例里的字符宽度关系要继续成立。查看轴范围、真实轮廓和目标字号,比只确认文件名带有「variable」更有用。