中文字体体积爆炸的解法是构建时字体子集化，用pyftsubset提取页面实际用字（含标点、ASCII、动态文案），保留OpenType特性，配合正确@font-face声明与CI校验。
font-face 引入中文字体时体积爆炸怎么办
直接用 @font-face 加载完整中文字体文件（比如思源黑体、Noto Sans CJK），动辄 10–30MB，页面首屏卡死是常态。这不是配置问题，是字体本身含数万汉字导致的必然结果。
核心解法不是“换字体”，而是「只打包当前页面实际用到的字」——即字体子集化（subsetting）。不子集化就上 @font-face，等于把整本《现代汉语词典》塞进每个用户浏览器缓存里。
- 子集化必须在构建阶段完成，运行时无法安全提取汉字（dom 渲染前无法预知所有文本内容）
- 推荐用
pyftsubset（FontTools）或fontmin（Node.js），避免在线子集服务（不可控、无缓存、隐私风险） - 中文子集要保留标点、ASCII 字母、数字——很多工具默认只提汉字，结果按钮上的 “Submit” 或 “404” 变成方块
- 若用 webpack，可配合
file-loader+ 自定义子集脚本，但注意：字体文件 hash 必须基于子集后内容生成，否则缓存失效
如何用 pyftsubset 提取页面实际用字
pyftsubset 是目前最稳定、支持 OpenType 特性（如 opentype layout、变体）的子集工具，比 fontmin 更准，尤其对 Noto、Source Han 系列。
关键不是“怎么跑命令”，而是“怎么拿到真实字集”：
立即学习“前端免费学习笔记（深入）”；
- 先用
document.body.innerText+ 正则提取汉字、中文标点（[u4e00-u9fa5u3000-u303fuff00-uffef]），再补上页面中所有data-*属性值、alt、placeholder等隐藏文本 - 不要依赖 HTML 文件字符串提取——JS 动态插入的文案（如 i18n 翻译、API 返回标题）会漏掉
- 执行命令示例：
pyftsubset SourceHanSansSC-Regular.otf --text-file=Chars.txt --output-file=font-subset.woff2 --flavor=woff2 - 务必加
--layout-features="*"，否则「一」字在不同上下文可能调用不同字形（如连笔、竖排变体），子集后显示异常
font-face 声明里哪些参数不能省
子集完字体只是第一步，@font-face 声明写错，浏览器照样回退到系统字体，且毫无提示。
-
font-family名称必须和 css 中font-family: "MySubset"完全一致（区分大小写、空格、引号类型） -
src必须按优先级列出格式：url("font.woff2") format("woff2"), url("font.woff") format("woff")；只写 woff2 会令 safari 14–15（无 woff2 支持）直接放弃加载 -
font-weight和font-style必须与原始字体元数据匹配，可用ftxvalidator或在线工具查；设错会导致同一font-family下粗体/斜体无法触发 - 别加
font-display: swap就以为万事大吉——子集字体仍需下载解析，首屏文字闪动（FOIT/FOUT）取决于网络延迟，不是 display 策略能绕过的
多语言页面如何管理子集字体
中英混排常见，但“中文字体 + 英文字体”双 @font-face 并不解决问题：浏览器按 Unicode 区段自动 fallback，一旦中文字体缺某个拉丁字母（比如子集时漏了 © 或 ™），就会跨字体渲染，造成字重/基线不一致。
- 子集时统一处理中英文混合文本，用同一份
--text-file，确保常用符号、品牌名、图标字符（如 Font Awesome 的f007）都在里面 - 避免用
unicode-range拆分字体——它只控制加载，不解决字形缺失；且 chrome 对连续 unicode-range 解析有 bug，可能跳过某段 - 若支持繁体/日文/韩文，不要为每种语言建独立子集字体——用一个超集（如 GB18030 + JIS X 0213 + KS X 1001 覆盖字）+
font-language-override控制 OpenType 语言系统行为更可控 - CI 流程里加入子集校验：用
fonttools ttDump检查输出字体是否真含目标字符，防止空子集上线
子集不是“一次配置永久生效”的事。文案改一个字、加一个 emoji、换一套 i18n 数据，字体就得重做。最容易被忽略的是：没人检查子集后字体的 OpenType 表（GPOS/GSUB）是否损坏——这会导致「字显示出来，但间距错乱、连字失效、竖排翻转」，而错误日志里什么都不会报。