网页排版：从 Helvetica
到可变字体

1957 年，瑞士的哈斯铸造厂发布了一款名为 Neue Haas Grotesk 的无衬线字体。三年后它改名发行，走向世界——你猜到了，就是 Helvetica。「像 Helvetica 一样清晰」，从此成为瑞士设计最响亮的广告语。

01从 Helvetica 开始

Helvetica 的伟大之处恰恰是它的「平庸」：中性、没有性格、近乎透明。它不替你说话，它只帮你把话说清楚。这也是为什么直到今天，无数操作系统和网页默认使用它的后代或仿品。

网页上我们通常不会真的打包 Helvetica，而是写一个字体栈，让系统逐级回退：

body{
  font-family: "Helvetica Neue", Helvetica, Arial,
    "PingFang SC", "Microsoft YaHei", sans-serif;
}

注意最后的回退：中文字体必须显式列出。西文栈写得再优雅，落到中文屏幕上，也会被一个随机的系统字体接管。

02中文字体的困境

中文没有西文那种「中立无衬线」的完整传统，屏幕上常见的候选是苹方（PingFang SC）、微软雅黑（Microsoft YaHei）与思源黑体（Noto Sans CJK）。它们字面率、笔画粗细各不相同，同一段文字在不同系统上的观感可能完全不同。

应对方法只有两招：第一，明确回退顺序，把最想要的效果放在最前面；第二，给中文更大的行高。中文方块字没有 x-height 的参照，行距通常需要比西文更慷慨：

html{
  font-family: "PingFang SC", "Microsoft YaHei",
    "Noto Sans CJK SC", sans-serif;
  line-height: 1.7;   /* 中文建议 1.6 – 1.8 */
}

03可变字体与未来

可变字体（variable fonts）把同一字族的多个字重、宽度甚至倾斜角度装进一个文件，浏览器可以像调音量一样连续取值。对排版而言，这意味着「光学尺寸」成为可能：标题自动加粗收紧，正文自动轻盈舒展，全部由系统实时计算。

中文可变字体仍在路上，但思源黑体的可变版与更纱黑体已经让中文开发者第一次尝到了「一个文件，无数种字重」的甜头。当字体文件不再是带宽的敌人，瑞士设计最看重的字距推敲，终于可以在网页上完整上演。

字体是内容的表情——排版错了，内容也会被读错。

下一篇，我们继续讨论静态网站的另一件大事：没有后端，搜索从哪里来？