设计给了全套思源黑体 转成 woff2 之后文件还有 3.8MB 4G 下首屏白屏 2.4 秒 字体到位后标题行高变了 正文整体往下移。第一次遇到会往复杂处想,其实漏掉的多是个小前提。

pyftsubset font.ttf --text-file=chars.txt \
  --flavor=woff2 --output-file=sub.woff2

中文字库动辄上万字 页面实际只用到几百个 全量字体既要下载又要解析 首屏根本等不起 按字符裁剪或者分片都能把体积压下来。这一点先确认清楚,后面就不用反复试。

「字体子集化」相关的日志我一般连着看前后五分钟,单看一条报错经常判断不出是哪一步失败。临时改动用注释写上日期和原因,过两周自己都记不清为什么这么写。

动手前把原文件复制一份带时间戳,出问题立刻换回去,比现场分析快得多。

具体做法是,用 fontmin 或者 pyftsubset 按页面里实际出现过的字符来生成子集;子集按 unicode-range 拆成两三个分片 把中文和符号分开加载;标题字体只留首屏用到的几十个字形 正文干脆交给系统字体。

改完照着核一遍,首屏字体文件降到 300KB 以内 文字出现时间提前 首屏行高不再跳变。

作者 9823189