字体为什么会拖慢首屏

网页要用一套好看的中文字体，动辄好几 MB。浏览器拿到网页后，要先下载字体文件才能用这个字体渲染文字，这期间文字要么不显示、要么先用系统字体顶着。字体文件大、加载慢，首屏就会白屏或抖动。字体优化的核心就是：让文字尽快出现、字体尽快到位、文件尽量小。

本文核心知识点
  • font-display控制字体加载期间文字怎么显示。
  • 子集化只打包页面用到的字符。
  • woff2压缩率最高的现代字体格式。
  • FOIT/FOUT文字隐形 vs 先显示后换字体。
Web 字体优化配图：蓝色渐变背景左侧环形加载进度几何图形，中央抽象笔画方块组成的字形轮廓，右侧切成几块的子集方块，扁平科技插画
加载环、抽象字形与被切分的子集方块，正是字体加载与子集化的意象。

font-display：别让文字消失

@font-face 里加 font-display: swap，意思是字体没加载好前先用系统字体显示文字，字体到了再换上去。这避免了 FOIT（Flash of Invisible Text，文字隐形白屏）。对中文这种大字体，swap 几乎是必选项，保证用户第一眼能读到内容。

@font-face {
  font-family: "MyFont";
  src: url("myfont.woff2") format("woff2");
  font-display: swap;
}

字体子集化：只加载用到的字

一套中文字体包含几万个字形，但一个页面实际用到的可能就几百个。用工具把字体按页面用到的字符裁切成子集，文件能从几 MB 压到几百 KB。站点字体还可以按常用汉字分级切片，按需加载、再缓存，这是中文站点字体优化最有效的一步。

woff2 与格式选择

字体格式里 woff2 压缩率最高、现代浏览器全支持，优先用它；老系统才需要兼容 ttf/woff。配合 preload 提前声明关键字体，让浏览器尽早开始下载，别等 CSS 解析到才发现要这个字体。

预加载与缓存策略

关键字体用 link rel=preload 提前加载，避免被 CSS 解析顺序拖慢；同时给字体文件设置较长的 Cache-Control 和不可变文件名（内容哈希），让用户二次访问时直接走缓存，不用重复下载。字体一般不常变，长缓存配合文件名哈希是最稳的组合。