前端字体性能优化：用 Font Splitter 实现按需加载字体

在前端开发中，引入美观的中文字体（如阿里巴巴普惠体）往往会遇到一个痛点：完整中文字体文件体积巨大（通常 5MB~10MB），直接引入会严重拖慢页面加载速度。本文将介绍如何通过 Font Splitter 工具结合 CSS unicode-range 特性，实现字体文件的按需加载，大幅优化页面性能。

一、问题背景：大字体文件的性能困境

当我们在项目中全局引入中文字体时：

body {
  font-family: 'alibaba-pu-hui-ti-3-regular', Arial, Helvetica, sans-serif;
}

如果直接引入完整字体文件（如 8.5MB 的阿里巴巴普惠体），会带来以下问题：

• 首屏加载慢：用户需要等待完整字体下载完成才能看到渲染后的文字，影响体验。
• 带宽浪费：页面实际只用到几百个常用字符，却要下载包含数万字符的完整字体。
• 缓存冗余：即使只修改了几个字，也需要重新下载整个大文件。

二、核心原理：unicode-range 按需加载

CSS 的 @font-face 规则提供了 unicode-range 属性，它允许我们为同一个字体族定义多个子字体文件，并指定每个子文件负责渲染的 Unicode 字符范围。

浏览器的工作流程如下：

1. 扫描页面文字：解析页面时，提取所有可见文字的 Unicode 编码。
2. 匹配字符范围：将文字编码与 @font-face 中的 unicode-range 逐一比对。
3. 按需下载：只下载包含页面所需字符的子字体文件，而非完整字体。
4. 渲染文字：用下载的子字体文件渲染对应字符，未覆盖的字符自动使用兜底字体。

三、工具选择：Font Splitter 快速分割字体

Font Splitter 是一个轻量级命令行工具，能自动将大字体文件按 Unicode 范围分割成多个小文件，并生成对应的 CSS 代码，完美适配 unicode-range 按需加载方案。

1. 安装 Font Splitter

npm install -g @vdustr/font-splitter

若生成 woff2 格式时提示 Brotli 缺失，需先安装 Python 依赖：

pip install Brotli

2. 基础使用命令

# 基础用法：分割字体并生成 woff2 格式
font-splitter ./AlibabaPuHuiTi-3-55-Regular.ttf -f woff2

# 自定义字体族名称（与项目中 font-family 保持一致）
font-splitter ./AlibabaPuHuiTi-3-55-Regular.ttf -f woff2 -n alibaba-pu-hui-ti-3-regular

# 不生成 local() 声明（避免中文乱码）
font-splitter ./AlibabaPuHuiTi-3-55-Regular.ttf -f woff2 -n alibaba-pu-hui-ti-3-regular --no-local

3. 输出结果

执行命令后，会在当前目录生成 output 文件夹，包含：

• 多个分割后的字体文件（如 AlibabaPuHuiTi-3-55-Regular.Basic-Latin.woff2）
• 对应的 CSS 文件（如 AlibabaPuHuiTi-3-55-Regular.css）

四、项目集成：无缝接入全局字体

1. 资源放置

将分割后的字体文件和 CSS 文件放入项目静态资源目录，例如：

├── public/
│   └── fonts/
│       ├── AlibabaPuHuiTi-3-55-Regular.Basic-Latin.woff2
│       ├── AlibabaPuHuiTi-3-55-Regular.Latin-1-Supplement.woff2
│       └── ...
└── src/
    └── assets/
        └── css/
            └── AlibabaPuHuiTi-3-55-Regular.css

2. 修改 CSS 路径

打开生成的 CSS 文件，将 url() 中的字体路径修改为项目实际路径：

@font-face {
  font-family: alibaba-pu-hui-ti-3-regular;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/AlibabaPuHuiTi-3-55-Regular.Basic-Latin.woff2') format('woff2');
  unicode-range: U+0, U+d, U+20-7e;
}

若生成的 CSS 中存在乱码的 local() 项，可直接删除，不影响功能。

3. 全局引入

在项目的全局样式入口（如 main.css）中引入分割后的 CSS：

/* 先引入分割字体的 CSS，定义字体族 */
@import './assets/css/AlibabaPuHuiTi-3-55-Regular.css';

/* 原有全局字体配置，无需修改 */
body {
  font-family: 'alibaba-pu-hui-ti-3-regular', Arial, Helvetica, sans-serif;
}

五、性能优化：结合 Nginx 缓存

为了进一步提升加载速度，我们可以对分割后的字体文件配置长期缓存：

location ~* \.(woff|woff2|ttf|otf|eot)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000, immutable";
    etag on;
    access_log off;
}

• expires 30d：设置缓存有效期为 30 天。
• Cache-Control: immutable：告诉浏览器该文件不会修改，避免重复验证请求。
• etag on：生成文件唯一标识，文件更新时自动触发重新下载。

六、效果验证

1. 浏览器 Network 面板验证

打开浏览器开发者工具（F12）→ Network 面板，刷新页面后：

• 观察字体文件请求：只会下载页面实际用到的字符范围对应的小文件。
• 查看响应头：确认 Cache-Control 等缓存头已生效。

2. 加载速度对比

七、常见问题与解决方案

1. CSS 中出现乱码

原因：Font Splitter 生成 local() 时，将字体的中文名称直接写入 CSS，导致编码问题。
解决：

• 方案 1：删除乱码的 local() 项，只保留 url()。
• 方案 2：生成时添加 --no-local 参数，从根源避免生成 local() 声明。

2. 字体不生效

排查方向：

• 确认 font-family 名称在 CSS 和项目中完全一致。
• 检查字体文件路径是否正确。
• 确认浏览器支持 woff2 格式（现代浏览器均支持）。

3. 生僻字显示异常

原因：生僻字未被分割后的 unicode-range 覆盖。
解决：重新运行 Font Splitter，调整分割范围，包含生僻字对应的 Unicode 区间。

八、总结

通过 Font Splitter + unicode-range 的组合，我们实现了：

• ✅ 按需加载：只下载页面实际用到的字符，大幅减少字体体积。
• ✅ 全局兼容：完美适配 body 全局字体配置，无需修改业务代码。
• ✅ 性能最优：结合 Nginx 长期缓存，实现「一次下载，长久使用」。
• ✅ 体验友好：font-display: swap 确保文字先渲染，避免页面闪烁。

这种方案特别适合需要引入中文字体的前端项目，在保证视觉美观的同时，最大化提升页面加载性能。

九、延伸阅读

• MDN: @font-face
• MDN: unicode-range
• Font Splitter GitHub 仓库

版权属于：Joyber

本文链接：https://blog.qqvbc.com/default/1429.html

转载时须注明出处及本声明