html字体子集化需手动完成，否则font-face仍加载完整ttf/otf；>100kb且仅用少量字符即需子集化；@font-face中unicode-range不等于已子集；思源黑体未子集达12mb，200字可压至80kb；font-spider可静态分析html/css提取真实字符，但无法捕获js动态文本；fontmin-app适合图形界面快速处理单字体；子集后须验证标点、大小写、连字等渲染一致性。
HTML 字体子集化不能靠浏览器自动完成，必须在构建或部署阶段手动提取字符并生成精简字体文件——否则你引入的 font-face 仍是完整 TTF/OTF，体积毫无改善。
怎么判断当前字体是否需要子集化
打开 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，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 确保 HTML 文件本地可访问（含内联 CSS 或已合并的样式表），
font-spider不支持远程 URL - 命令行运行：
font-spider --html index.html --font ./fonts/your-font.ttf - 输出结果是新字体文件（默认加
-subset后缀），同时会生成带unicode-range的@font-face声明片段 - ⚠️ 注意：若页面有 JS 动态插入文本（如 i18n 翻译、用户输入预览），
font-spider无法捕获——需手动补充字符集到配置中
用 fontmin-app 图形界面快速处理单字体
适合没命令行经验、或只需处理一两个字体的场景。它不依赖代码分析，而是让你直接输入/粘贴所需字符，或上传文本文件供其提取。
关键操作点：
- 拖入
.ttf或.otf文件后，左侧会显示总 glyph 数（如 “65535 glyphs”），右侧输入框填入你要保留的内容，例如：首页关于我们联系我们0123456789 - 输出格式选
woff2（现代浏览器全支持，压缩率比 woff 高 30%+） - 勾选 “Remove unused metadata” 可额外减小 5–10KB，不影响渲染
- 生成后别忘了更新 CSS 中的
src路径，指向新的.woff2文件
子集字体上线后必须验证渲染一致性
子集化后最常出问题的是：标点符号缺失（尤其是中文顿号、省略号）、数字零与字母 O 混淆、连字（ligature）被意外剔除、或者某些 CSS text-transform: uppercase 导致大写变方块。
建议检查方式：
- 在 Chrome 中打开 DevTools → Elements → 找到文本节点，右键 “Edit as HTML”，手动修改几个字符为易错字（如把 “公司” 改成 “公司、” 或 “公司...”），观察是否 fallback 到系统字体
- 用
opentype.js加载子集字体，调用font.hasGlyphForCodePoint(0x2026)（省略号 Unicode）确认是否存在 - 若用 Webpack，可接入
fontmin-webpack-plugin，在构建时校验子集覆盖度，失败则报错中断发布
真正麻烦的不是生成子集，而是确认所有动态路径、异步内容、多语言文案都覆盖到了——漏一个字符，就可能在某个用户界面上突然崩出宋体方块。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
