Font-spider (字蛛) 实战教程：如何将 30MB 中文字体压缩至 200KB

在《Google Fonts 国内优化与本地化战略》一文中，我们提到了中文字体子集化是提升跨境网页性能的关键。本文将深入探讨目前最强大的开源压缩工具：Font-spider（字蛛），并提供多种替代方案。

什么是字蛛 (Font-spider)？

字蛛是一个通过分析本地 HTML 页面，自动提取使用的汉字并重新构建字体文件的工具。它不仅能将几万字的字库瘦身为几百字的“精华版”，还能自动生成 .woff, .woff2, .svg, .eot 等主流 Web 格式。

方案一：Node.js 环境下的字蛛实战

1. 环境准备

# 全局安装字蛛
npm install font-spider -g

2. 编写 CSS

字蛛的工作原理是扫描 CSS 中的 @font-face。您必须提供原始的 .ttf 格式：

@font-face {
  font-family: 'MyCustomFont';
  src: url('./fonts/SourceHanSans.ttf'); 
  font-weight: normal;
  font-style: normal;
}

3. 运行压缩

font-spider index.html

方案二：无 Node.js 环境？使用 Python fonttools (pyftsubset)

如果您的服务器环境没有 Node.js，或者您需要在 Python 项目中集成字体压缩，可以使用 fonttools。

1. 安装

pip install fonttools brotli

2. 执行子集化

如果您知道具体的文字内容，可以直接运行：

pyftsubset SourceHanSans.ttf --text="这里放入你需要的文字" --flavor=woff2

• --flavor=woff2：直接输出压缩率最高的 woff2 格式。
• --output-file=subset.woff2：指定输出文件名。

方案三：自动化爬虫压缩 (Glyphhanger)

如果您有一个庞大的动态网站，手动提取文字太慢，可以使用 Glyphhanger。它会启动一个无头浏览器（Puppeteer）爬取您的整个站点，自动收集所有字符。

# 安装 glyphhanger
npm install -g glyphhanger

# 爬取本地开发环境并生成字体
glyphhanger http://localhost:8080 --subset=SourceHanSans.ttf --formats=woff2

核心挑战：处理动态内容 (Dynamic Content)

字蛛默认只扫描静态 HTML。对于 Vue/React 或 后端渲染 的动态文字：

1. 预设占位符：在 HTML 中创建一个隐藏的 div，放入所有业务场景中可能出现的汉字（如“确定”、“取消”、“搜索结果”）。
2. 全常用汉字包：如果无法预测，可以提取“中国国家标准一级字表”（3500 字）。虽然比几十个字大，但仍远小于原版 20MB 的全字库（通常压缩后为 1-2MB）。

性能对比：压缩前 vs 压缩后

总结：该选哪种方案？

• 简单静态页：选 Font-spider。
• 后端/数据分析项目：选 Python fonttools。
• 大型动态站点/博客：选 Glyphhanger。

通过子集化技术，中文字体将不再是网页加载的负担，而是品牌视觉的加分项。

下一步建议： 压缩完成后，别忘了配置 Nginx 跨域与缓存策略 以获得极致的响应速度。