字体子集化需手动完成，否则@font-face仍加载全量字体；判断标准是network中字体文件＞100kb且实际用字极少；unicode-range声明不等于已子集化；中文字体冗余最严重，如sourcehansanssc-regular.otf达12mb，子集可压至80kb；英文图标字体同理；google fonts的text参数仅部分支持且不兼容中文；font-spider适合静态分析但无法捕获js动态文本；pyftsubset更准且能保留opentype特性，需手动收集所有真实用字（含data-*、alt等）；@font-face的font-display、unicode-range、src必须与子集文件严格匹配，否则静默回退系统字体。
字体子集化不能靠浏览器自动完成，必须在构建或部署阶段手动提取字符并生成精简字体文件——否则你写的 @font-face 仍会加载完整 .ttf 或 .woff2，体积毫无改善。
怎么判断当前字体是否需要子集化
打开 DevTools → Network → 找到字体请求（.woff2、.ttf 等），点开看「Size」列。如果单个字体文件 > 100KB，且页面只用到几十个汉字（比如标题+按钮文字）或纯英文数字，基本可以断定存在严重冗余。
常见误判点：@font-face 中声明了 unicode-range 并不等于已子集化——这只是告诉浏览器“这段字体负责哪些码位”，实际文件仍是全量的。
- 中文字体尤其危险：一个未子集的
SourceHanSansSC-Regular.otf高达 12MB，而仅含 200 个常用字的子集可压到 80KB 左右 - 英文图标字体（如 Font Awesome）也适用：只保留用到的
\f001、\f002等 glyph，能砍掉 70%+ 体积 - 若使用 Google Fonts，优先查官方是否提供
&text=Hello+World参数，但注意它只对部分字体生效，且不支持中文
用 font-spider 提取真实使用的字符
font-spider 是目前最可靠的静态分析工具，它会扫描 HTML/CSS 文件，找出所有 content 属性、伪元素、文本节点里的 Unicode 字符，再反向匹配字体中对应 glyph。
实操步骤：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 确保 HTML 文件本地可访问（含内联 CSS 或已合并的样式表），
font-spider不支持远程 URL - 命令行运行：
font-spider --html index.html --font ./fonts/your-font.ttf - 输出结果是新字体文件（默认加
-subset后缀），同时会生成带unicode-range的@font-face声明片段
⚠️ 注意：若页面有 JS 动态插入文本（如 i18n 翻译、用户输入预览），font-spider 无法捕获——需手动补充字符集到配置中
用 pyftsubset 处理中文字体并保留 OpenType 特性
pyftsubset（来自 FontTools）比 fontmin 更准，尤其对 Noto、Source Han 系列，关键是它能保留 opentype layout 特性（如连笔、竖排变体），避免「一」字在不同上下文显示异常。
关键不是“怎么跑命令”，而是“怎么拿到真实字集”：
- 先用
document.body.innerText+ 正则提取汉字、中文标点（[\u4e00-\u9fa5\u3000-\u303f\uff00-\uffef]），再补上所有data-*属性值、alt、placeholder等隐藏文本 - 不要依赖 HTML 文件字符串提取——JS 动态插入的文案会漏掉
- 执行命令示例：
pyftsubset SourceHanSansSC-Regular.otf --text-file=chars.txt --output-file=font-subset.woff2 --flavor=woff2 --layout-features="*"
@font-face 声明里 font-display、unicode-range、src 的格式必须与子集后文件严格匹配，否则浏览器静默回退到系统字体，毫无提示。
最容易被忽略的是标点、ASCII 字母和数字——很多工具默认只提汉字，结果按钮上的 “Submit” 或 “404” 变成方块；还有 --layout-features="*" 这个参数，不加的话，中文字形在不同语境下可能错乱，但多数人根本不知道它存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
