网页字体的加载问题，在中文场景下尤其突出。一套完整的中文字体动辄两三兆字节，如果不做任何处理直接加载，会明显拖慢首屏速度，甚至造成文字长时间不显示或闪烁。
一、字体加载为什么影响性能
字体文件与其他资源不同，它属于「渲染阻塞资源」。浏览器在字体加载完成前，要么用系统默认字体先显示（可能造成文字闪烁），要么等待字体加载完成再显示文字（可能造成内容空白）。两种行为都会影响体验。
此外，字体文件通常需要通过 CSS 中的 @font-face 规则引用，浏览器需要先解析 CSS 才能发起字体请求，这进一步增加了加载链路长度。
二、子集化：减小体积最有效的手段
子集化是指从完整字体中提取实际用到的字符，生成一个精简文件。
静态子集化。在构建阶段分析页面用到的字符，生成包含这些字符的子集文件。适合内容相对固定的站点，体积通常能减少 80% 以上。
动态子集化。根据请求的字符范围动态生成子集。适合内容经常变化或用户可输入的站点。实现复杂度较高，通常借助服务实现。
字符集划分。把字体按 Unicode 范围切分成多个子集文件，浏览器根据页面实际用到的字符按需加载。中文可以按常用字、次常用字划分。
三、加载策略的选择
font-display 属性控制字体未加载完成时的显示行为，是核心配置项。
swap。立即用回退字体显示，字体加载完成后替换。好处是文字立即可见，缺点是会出现字体切换的闪烁。适合正文内容。
optional。如果字体在极短时间内未加载完成，则本次使用回退字体，不进行替换。几乎不影响性能指标，适合非关键的修饰性字体。
fallback。介于两者之间，给出很短的阻塞期，超时后用回退字体且不再替换。适合需要平衡体验和性能的场景。
block。短暂阻塞文字显示。一般不推荐使用，除非字体是品牌标识的核心视觉元素。
四、回退字体策略
回退字体不仅是为了兼容，还直接影响加载过程中的视觉稳定性。
选择度量接近的回退字体。如果回退字体和目标字体的字宽、字高差异很大，字体切换时会出现明显的布局跳动。选择度量接近的系统字体能减轻这个问题。
使用字体度量覆盖。通过 size-adjust、ascent-override 等 CSS 属性，手动调整回退字体的度量，让两套字体占据相近的空间，减少切换时的布局跳动。
预加载关键字体。对首屏必须使用的字体，使用 preload 提示让浏览器提前发起请求，缩短关键路径上的等待时间。注意只预加载真正关键的字体，过度预加载会挤占其他资源的带宽。
五、优化效果的验证
优化后需要通过实际测量验证效果，而不是凭感觉判断。
关注三个指标：字体文件的实际传输体积、首屏文字的渲染时间、以及字体切换造成的布局偏移量。通过浏览器的开发者工具或者性能测试服务可以获取这些数据。
另外，在弱网环境下测试非常重要。很多加载问题在高速网络下不明显，但在移动网络或网络波动时会显著放大。建议在限制带宽的条件下做一次完整测试。
字体加载优化的目标不是让字体加载得绝对快，而是在字体加载过程中依然保持良好的视觉体验——文字可见、布局稳定、不出现明显闪烁。
五、加载策略的组合优化
字体加载优化的核心，是在”好看”与”快”之间找到平衡。常用的组合策略包括：关键字体预加载，对首屏会立即显示的标题字体使用 preload，让浏览器优先获取；正文回退，为正文设置一组视觉效果接近的系统字体作为后备，在自定义字体加载完成前先展示回退字体，避免布局空窗；分阶段加载，首屏只加载必需字符集与字重，其余内容在滚动或交互时按需加载。
另一个实用技巧是font-display 策略。通过设置 font-display 为 swap 或 optional，可以控制字体在加载期间的表现：swap 会在字体就绪后替换回退字体，适合品牌字体必须呈现的场景；optional 则可能在网络较慢时直接使用回退字体，优先保证速度与稳定。选择哪种，取决于品牌对字体一致性的要求有多高。
六、验证与持续监控
优化不是一次性的动作，而需要持续验证。上线后应关注两项指标：一是字体文件的加载耗时与体积，确认子集化是否生效、是否有冗余字重被加载；二是视觉稳定性，检查是否出现”字体闪烁”或”布局位移”，即字体加载导致的文字跳动。可以借助开发者工具的字体面板与性能面板定位问题。
对于内容持续增长的站点，还要建立字体的定期巡检机制：随着新内容引入新的字符或符号，子集可能需要重新生成；随着品牌升级引入新字重，加载策略也要同步调整。把字体加载纳入日常的性能监控清单，才能让它在长期运行中始终保持轻快与稳定。
