工作记录

博客字体的选择

开发 阅读 4 分钟

目录

记录博客更换字体，结果把字号、行高、行宽、颜色全部换了一遍——因为字体族要配对尺寸系统，动一个就得动一串。

从衬线体到系统黑体

最初使用思源宋体的子集（400/700 两档，子集化后各 400KB 左右），当时的实现：

@font-face {
  font-family: "Noto Serif SC";
  font-weight: 400;         /* 700 同款再来一遍 */
  font-display: optional;   /* 字体没按时到就直接用兜底，不闪不跳 */
  src: url("fonts/NotoSerifSC-400.woff2") format("woff2");
}
body {
  /* 拉丁字形在前：英文、数字走 Georgia（真斜体+老式数字），中文落自托管宋体 */
  font-family: Georgia, "Iowan Old Style", "Noto Serif SC",
    "Source Han Serif SC", "Songti SC", SimSun, serif;
  font-size: 1.125rem;      /* 18px */
  line-height: 1.9;
}

18px 时挺优雅，后面看到别人用黑体，方正且清晰；先不想动字体，试着把宋体放大到 20px 提高清晰度——衬线的装饰笔画被同步放大，通篇发腻。

因为字体族要配对尺寸系统，衬线的最佳区间在小字号、印刷密度的场景，而屏幕阅读的方向是大字号、松行距，这个区间属于黑体。

现在的正文字体栈：

font-family: system-ui, -apple-system, "Segoe UI", "PingFang SC",
             "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;

还是逐字路由，只是字形全换了：Mac/iOS 落到苹方，Windows 落到雅黑，Android 落到思源黑体——每个平台渲染最熟的那款中文黑体，零下载、零布局抖动。

代价是「每个人看到的不完全一样」，但屏显中文黑体的同质化程度很高，这点不一致远小于几百 KB 字体下载换来的负担。

代码块等宽字体顺序单独钉死：

--mono: "Cascadia Code", "SF Mono", Menlo, Consolas,
        "JetBrains Mono", "Sarasa Mono SC", ui-monospace, monospace;

不钉的话，等宽栈里的中文会在某些系统上兜底到宋体或非等宽字形，代码列就对不齐了。

字号与密度

一行文字的行盒等于字面加行间空气。把「一行里墨占的比例」叫墨气比的话：

旧版: 18px 字 × 1.9 行高 = 34.2px 行盒，墨占 53% —— 疏散，显得"字小"
现在: 22px 字 × 1.75 行高 = 38.5px 行盒，墨占 57% —— 结实，"字大而清晰"

同一款字体，墨气比不同，观感天差地别。

先后试过「只换字体、密度不动」（没有改善）和「衬线体直接放大」（发腻），单变量全都失败——因为密度是一组耦合参数：字号、行高、段距、行宽，要一起动才测得出方向。

现在的取值：

body {
  /* 手机 17px 出头，约 1500px 视口封顶 22px；rem 基准尊重用户默认字号 */
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.375rem);
  line-height: 1.75;
}
p { margin: 0.9em 0; }

段距刻意收紧到 0.9em，段落要缩成「块」，段间空白才能当定位锚用（下一节展开）。

标题全部 em 化（h1 是正文的 1.65 倍、h2 1.4 倍、h3 1.15 倍），随正文自动缩放；层级靠颜色深浅而不是靠尺寸悬殊——标题色比正文深一档，大标题就不必大到占半屏。

行高也不是全站一个值，而是一个梯度：正文 1.75（阅读节奏）、代码块 1.7、表格 1.65、目录 1.5（索引扫视）。

呼吸感只属于连续正文，数据元素各配紧凑行高，互不污染。

页面行宽

经典纪律说中文每行 32~38 字。这个站内容区 720px，22px 字号下约 30 字一行，压着下限。

不过「行宽纪律」其实是个代理指标，背后的真机制是回扫：

换行找行首的出错风险，约等于行宽 × 段落行数 ÷ 行距。行距大，回扫的纵向目标就大；段落短到一两行，几乎不需要连续回扫，段间空白本身就是定位锚。

所以有的站一行 60 字照样清晰——那是短段落、大字号、紧行距三件套一起换来的宽行特权。

字体颜色

正文不用纯黑配纯白（对比度 21:1），停在 12.7:1（#2d2b28 配蛋壳灰纸面 #f4f3ef）。高分屏上纯黑白会产生光晕效应，笔画边缘发亮颤动，散光的人尤其累。

暗色模式同理：文字是降了亮度的近白，底是深暖灰而不是纯黑，10.7:1。

文字色分三层：标题最深，正文居中，辅助信息（日期、页脚）灰一档——但灰的下限是法定的，4.84:1，踩在 WCAG AA 及格线（4.5:1）上方。

安静是设计，看不清是缺陷，两者之间隔着及格线。

这条线上最纠结的是代码注释。审计脚本说它只有 2.5:1 不达标；按标准提到 4.5 之后，注释和代码正文平起平坐，「注释该退后」的层级感反而没了。

最后停在 3:1——WCAG 给大字号和图形件的那条底线。

退后是语义，消失是缺陷。注释就该比代码淡，但不能淡到在差屏幕和正午阳光下整段蒸发。

手机和桌面

同一套 CSS，两端的差异靠三件事：

  • 字号 clamp() 随视口连续浮动，没有断点跳变：手机 17px、平板 19px、桌面 22px 是同一条公式的三个取值；
  • 窄屏行高收到 1.7：行短了回扫容易，行距可以还一点给密度；
  • 界面件（导航、日期、页脚）用 rem 定值，不随正文膨胀——正文是内容，界面是家具，家具不该跟着内容变大。

最后的结论：清晰主要不是字体问题，是密度问题。现在全站零网络字体、零框架，样式一个 CSS 文件。