⭐ 觉得好用?收藏备用,下次直接打开
🅰
拖拽字体文件到此处
支持 .ttf · .otf · .woff · .woff2
🔒 文件仅在浏览器本地解析,不上传任何服务器

字体子集化(Font Subsetting)指从一个完整字体文件里只保留指定字形,丢弃其余字符的字形数据。中文字体之所以动辄十几 MB,是因为收录了 GB18030 全集 2–7 万个汉字;但一个网站标题往往只用到几十个字——保留这几十个字、删掉其余,体积常常缩小到原来的 1‰,是中文 Web 字体的核心优化手段。

本工具同时承担格式转换:TTF / OTF 是桌面字体格式,WOFF2 才是 @font-face 的最佳实践(比 TTF 小约 50%,全部现代浏览器支持)。把字库官网下载的 .ttf 一键转 .woff2 是常见需求。

工作流程

  1. 拖入字体文件 — TTF / OTF / WOFF / WOFF2 自动识别,magic bytes 检测,不依赖文件后缀
  2. 选模式子集化 按文本提取字形 / 仅格式转换 保留全部字形换格式
  3. 输入要保留的字符(仅子集化模式)— 把标题文字、按钮文字、营销词通通粘进来,重复字符自动去重
  4. 选输出格式 — 默认 WOFF2,需要兼容老浏览器可加输出 WOFF
  5. 下载 — 文件名自动加 .subset 后缀,避免覆盖原字体

大小预期

操作思源黑体 1 字重原始 ~10 MB
仅 TTF→WOFF2(保留全部)~5 MB
子集保留 ASCII 95 字~25 KB
子集保留 50 个常用汉字~30 KB
子集保留 3500 常用汉字~900 KB
子集保留 7000 通用规范汉字~1.6 MB

英文字体大小一般 100–500 KB,子集化收益有限,做 TTF→WOFF2 即可。

在网页里使用

下载得到的 .woff2 直接用 @font-face 引用:

@font-face {
  font-family: "BrandFont";
  src: url("/fonts/brand.subset.woff2") format("woff2");
  font-display: swap;          /* 避免 FOIT 空白闪烁 */
  unicode-range: U+4E00-9FFF;  /* 可选:只对汉字范围生效,英文交回系统字体 */
}
.title { font-family: "BrandFont", "PingFang SC", sans-serif; }

font-display: swap 让浏览器先用兜底字体显示文字,字体到位后再替换;unicode-range 可以让英文字符不下载这个中文子集,进一步省流量。

隐私与合规

字体处理完全在浏览器内运行,没有任何后端调用。商业/付费字体许可里常见”禁止将原字体文件上传到第三方服务器/SaaS”的条款,使用浏览器内工具不会触发这一限制(仍需注意:对子集后的 woff2 重新分发依然属于”分发字体”,受原 EULA 约束,请阅读你购买字体的具体许可)。

局限

  • OTF 不可写:OTF 输入会被转成 TTF 再写出,不能直接输出 OTF
  • 可变字体不切轴:保留全部 variation axes,不支持按 wght/wdth 实例化
  • 大字体 + 大子集慢:单次处理 3–10 秒属于正常;超大批量请走 pyftsubset 等命令行
  • 字距/连字保留有限hintingkerning 默认不保留以减小体积,对中文绝大多数场景无影响

📍使用场景

  • 网页标题用一个特殊中文字体设计师选了思源宋体做网站标题,原字体 10MB+,用本工具按标题文字提取子集,瘦身到几 KB 再上传到 CDN,首屏不卡。
  • 桌面字体改成网页可用的 WOFF2从字库下载到 .ttf / .otf,本地装好用得很爽,扔到网页又被浏览器吐槽体积大。一键转 WOFF2,体积自动小 30%。
  • 海报/单页站只有几十个字落地页 H1、按钮、营销词加起来不到 50 个字,却被迫加载整个 15MB 字库。子集化后通常压到 5–20 KB,移动端流量友好。
  • 处理付费字体不想上传商业字体许可往往禁止上传到第三方服务器。本工具完全在浏览器跑,字体文件不出本地,规避合规风险。

常见问题

子集化能把中文字体压多小?

取决于保留的字数。常见经验:思源黑体 / 思源宋体(约 10 MB / 字重)保留 20 个字 通常压到 8–15 KB,保留 3500 常用字 大约 800 KB–1.2 MB。压缩比和原字体的字形复杂度(笔画密度)正相关,方正/汉仪商业字体大体也是这个量级。

浏览器都支持 WOFF2 吗?

支持。Chrome 36+、Firefox 39+、Safari 10+、Edge 14+ 全系支持,全球可用率 >97%(caniuse)。如果要兼容 IE11 才需要再生成一份 WOFF 兜底。WOFF2 比 WOFF 再小约 30%,比 TTF 小约 50%,是当今 @font-face 的事实首选。

输入 OTF 输出 WOFF2 行不行?

可以。OTF(含 CFF 曲线)会被读入后内部转成 TTF(TrueType 曲线),再编码成 WOFF2 输出。注意:本工具不能直接输出 OTF——这是底层库 fonteditor-core 的限制。如果你需要保留 CFF outline,请改用桌面工具 fonttools / FontForge。

文件会不会被上传?

不会。完全在浏览器内执行:字体解析用 fonteditor-core,WOFF2 编/解码用 Google 官方的 woff2 库(编译为 WebAssembly,约 710 KB,从同源静态加载)。你可以断网测试,或者打开 DevTools 的 Network 面板验证。适合处理付费/商业字体——多数商业字体许可禁止上传到第三方 SaaS。

怎么把子集字体用到自己的网页?

下载得到 myfont.subset.woff2 后,CSS 里写:@font-face { font-family: "MyFont"; src: url("/fonts/myfont.subset.woff2") format("woff2"); font-display: swap; },然后元素里 font-family: "MyFont", system-ui, sans-serif;。建议加 font-display: swap 让字体没加载完时先用兜底字体显示文字,避免 FOIT(看不见字的空白期)。

可变字体(Variable Font)能用吗?

能读、能写、但变量轴会保留全部。本工具不暴露按轴值切片(instancing)的能力——例如把一个 wght 100→900 的字体钉到 wght=400 的小 instance。如果需要这种精细操作,请用 fonttools 的 pyftsubset --variation-axes wght=400 或 subset-font 的 variationAxes 选项。常见 web 场景下字符子集化已经足够。

转换很慢/卡浏览器怎么办?

思源系列等大字体保留 3500 常用字 时单次处理 3–10 秒 属于正常——浏览器主线程在跑解析+重组+WOFF2 压缩。建议:(1) 先用小一点的字体测试流程;(2) 不需要这么多字时只保留实际用到的;(3) 大型项目改用命令行 pyftsubsetfontmin 写进构建脚本里。本工具定位是临时性、即开即用的处理。