猫啃网
页面打开，先看到的是系统默认的宋体，过了一两秒才跳成设计稿里的那款字，整段文字跟着重排一次。手机上更明显，标题位置空着，正文已经读完两行了。用户不会抱怨字体，只会觉得这个站“有点慢”。
中文字体和英文不是一个量级：一套全量中文 ttf 常在 5 到 20MB，英文字体往往只有几十 KB。慢的根源大多不在服务器带宽，而在文件本身太大、请求时机不对。下面四个调整，按见效快慢排。
文中的字体例子取自猫啃网收录的 839 款免费中文字体，格式与协议写在详情页，取用前先看这两项。
一、先花十分钟定位，别急着改
在开发者工具里看字体请求。 打开网络面板，按类型筛出字体，看三件事：文件多大、下载多久、什么时候发起。字体文件排在几十个请求之后才开始下载，首屏自然等不到它。
分清是下载慢还是渲染慢。 下载慢看体积和网络；渲染慢看是不是引了太多字重、是不是在进行子集重排。两种情况处理方式完全不同。
数一下引了几个字体文件。 一个字重一个文件，常规、中粗、粗三档就是三个请求。再叠上中英文两套家族，很容易变成五六个文件。
看首屏真正用到哪些字。 多数页面首屏只用了标题、导航、几句正文，字符量可能不到两百个。用全量字体去服务这两百个字，是浪费的主要来源。
二、先把体积压下来：换格式，再做子集
woff2 是为网页设计的容器。 它在字体数据外层加 Brotli 压缩，同样的字形，体积比 ttf 小三到五成。主流浏览器都已支持，不需要额外兼容代码。用开源的 woff2 转换工具，命令行一行就能出结果。给印刷用的文件别拿这个替代，两者用途不同。
留一份回退，但不必多留。 只有需要兼容很老的浏览器时才补一份 woff。多数项目只引 woff2 就够，多引一份等于多一次下载。
格式的上限要清楚。 全量中文 ttf 压成 woff2，往往还有 3 到 8MB。真正把体积拉下来的是子集化。
按实际字符裁切。 子集工具读取页面用到的字符集，只保留这些字形。内容固定的落地页，裁完常在几十到两百 KB 之间。
按字符集分片。 内容会变的站点，按常用字表分片更实际：常用三千五百字做一片，生僻字、标点各做一片，用 CSS 的 unicode-range 声明每片覆盖的范围。浏览器只下载页面实际命中的那几片。
标题和正文分开处理。 标题字少、样式重，可以单独做一个小子集；正文交给系统字体栈兜底，是资源占用较低的组合。很多站点只在标题上用品牌字，正文用系统黑体，效果和速度都能接受。
代价要认。 子集化之后，页面新增文字要重新生成，否则新字会回落成兜底字体。把它挂进构建流程，每次发布自动跑一遍，就不容易漏。
三、让文字先显示出来
font-display 选 swap。 字体没下载完时先用兜底字体渲染，下载完再替换。用户能立刻读到内容，代价是会有一次字形跳变。
font-display 选 optional 更激进。 网络慢的时候直接用兜底字体，本次访问不替换，等下次访问命中缓存再用品牌字。适合内容型站点，品牌页要慎用。
别用 block。 它会让文字在字体加载期间保持隐形，上限约三秒。首屏白着一片，比字体跳变难受得多。
预加载关键字体。 在页面头部加一条 preload，把首屏必用的那个 woff2 提前拉起来。crossorigin 属性不能省，否则浏览器会当成两个不同资源，下载两次。
兜底字体栈要写全。 font-family 里把品牌字放第一位，后面接系统黑体、无衬线通用族。字体加载失败时，页面回落到一个明确的选择，而不是让浏览器随便挑。
四、把缓存和请求顺序理顺
缓存给足时间。 字体文件不常变，响应头里设一年的强缓存，文件名带上内容哈希。更新字体时改文件名，旧缓存自然失效。
减少字重数量。 每档字重是一个独立文件。正文一档、标题一档，两档通常够；为了一个加粗效果多下一个文件，收益很低。
字体别阻塞首屏。 把字体声明放在关键样式里，非首屏用到的字体按需加载。有些站点把所有字重一次性 preload，反而拖慢了首屏。
考虑就近节点。 字体是静态资源，放在离用户近的节点上，跨境访问的延迟能降下来。这一步在服务器侧完成，前端不用改代码。
测一遍再上线。 用限速模式模拟移动网络，看首屏文字多久出现、跳变几次。改完前后各测一次，效果才有对比。
五、取用与试用
文件从写明信息的页面取。 详情页同时给出字体全名、格式和协议类型的，后续核对省事。打开压缩包先看清内容，正常的字体包是一到多个字体文件加一份协议文本。思源黑体 简繁覆盖完整、字重齐全，是网页项目里的通用选择；素材集市智造黑 骨架规整，做界面标题接得住；抖音美好体 字面饱满，短标题辨识度高；MiSans 字重梯度完整，做正文与按钮的层级搭配比较顺。
不必把试验用的字体都装进系统。 网页项目往往同时试好几款，装进系统目录后管理成本会上升：
- 字由客户端：下载安装后，在客户端里激活想用的字体，PS / AI / Sketch 自动识别，免去装系统的麻烦。猫啃网提供官方下载入口。
授权说明
这里说的“可用”，指字体文件能在网页里正常加载并输出字形。核验按三步走。
第一步，确认字体全名。 网页引用的字体族名要和文件内部名称对得上，带 GB、免费版这类后缀的更不能省略，否则可能出现样式不报错但不生效的情况。子集化之后族名保持不变，别在生成时随手改名。
第二步，查协议类型。 常见几类：开源协议（如 SIL OFL、MIT、GPL）、作者声明免费商用、随软件预装的授权。开源协议文本公开可查，通常允许修改与再分发，衍生版本需更换名称；作者声明的范围由声明自身界定，要连版本号一起看。
第三步，核使用场景。 网页分发、印刷、视频一般在前两类协议里被明确允许；把字体嵌入 App、电子书，或用于 Logo 商标注册时，要单独确认。子集化和格式转换都属于加工文件，协议条件照旧适用。
留凭证。 把字体全名、获取日期、许可页面截图和链接记在同一个文档里。字体版本更新后说明可能变化，有记录才好追溯。
常见问题
问：字体加载慢，是不是换台好服务器就行？
多数时候不行。瓶颈在文件体积和请求时机，不在带宽。先做子集化，再谈服务器。
问：woff2 转完还是很大，怎么办？
全量中文字体压完仍有几 MB，这一步的上限就在这里。要继续降，只能做子集化，把用不到的字裁掉。
问：font-display: swap 会不会很难看？
会有一次字形跳变，但用户能立刻读到内容。相比文字隐形几秒，跳变是更小的代价。配合 preload 能缩短跳变窗口。
问：页面上只用了几十个字，也要引全套吗？
不需要。按实际字符做子集即可，但要把生成步骤挂进构建流程，内容更新后自动重跑。
小结
网页字体慢，先定位再动手：看清体积、请求数量和发起时机，比盲目换服务器有效。四个调整按顺序做——转 woff2 压一层，子集化再压一层，font-display 让文字先显示，缓存和请求顺序收尾。中文站点尤其要把子集化当成常规步骤，全量文件放在网页上，其他优化都补不回来。
