博客字体方案演进：从 Noto Sans SC 到阅读优先排版设计

TL;DR

从 Arial 到 Noto Sans SC，再到 Noto Serif SC 衬线体，博客字体方案经历了三次大改。这对阅读体验定义不断深化过程。

阶段一：系统字体回退

最初用是浏览器默认字体。踩坑点：line-height 用 px 固定值导致不一致，没给按钮和表单设置 font-family: inherit，没指定 font-weight。

阶段二：Google Fonts + Noto Sans SC

引入 Google Fonts Noto Sans SC 后踩了四个坑：FOUT 闪烁、国内 CDN 加载慢、字重过渡不均匀、服务器无法访问 Google Fonts CDN。

阶段三：Noto Serif SC 阅读优先（v0.0.16 至今）

17px + 2.0 行高 + 680px 宽度，组成宽松阅读节奏：

:root {
  --reading-width: 680px;
  --font-body: "Noto Serif SC", "Source Han Serif SC", serif;
  --text-primary: #2c2c2c;
  --line-height-body: 2.0;
}
article {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: var(--line-height-body);
  color: var(--text-primary);
  max-width: var(--reading-width);
  margin: 0 auto;
  text-indent: 2em;
}

踩坑点：font-family 回退链导致衬线/非衬线混排，按钮用衬线体突兀，text-indent 在短段落中空洞。

字体加载策略

当前方案零 FOUT、零加载时间、零 CDN 依赖。代价是字体效果取决于用户设备。

未来的方向

1. 自托管 woff2 — 字体一致性最好，代价是 2-3MB 额外请求
2. 可变字体 — 中文选择少
3. font-display: optional — 100ms 内没加载好就用系统字体

写在

技术博客用 sans-serif，个人博客用 serif。不要用 Google Fonts CDN 做不可降级设计。