字蛛+：智能 WebFont 压缩工具
字体文件太大？让字蛛+帮你瘦身。
背景
在构建个人作品集网站时，我使用了多种装饰性中文字体来提升视觉体验——玄宗体、朱雀仿宋、佑字、平方相思体、夏日手写等。这些字体文件动辄十几 MB，单一个玄宗体就达到了 37MB。
自托管这些字体带来了两个问题：
- 服务器带宽压力大：Nginx 代理大文件时容易连接重置
- 页面加载慢：用户需要下载几十 MB 的字体才能看到页面
Google Fonts 可以解决主流字体的问题，但装饰性中文字体往往不在 Google Fonts 上，只能自托管。
什么是字蛛+？
字蛛+（Font-spider-Plus） 是一个智能 WebFont 压缩工具，它能自动分析页面中实际使用的文字，然后按需保留字形，删除未使用的部分，大幅减小字体体积。
它基于 font-spider（字蛛） 开发，额外支持线上动态渲染的页面和 GBK 编码的文件。
工作原理
字蛛+ 的原理很简单：
- 扫描 HTML 页面，提取所有使用指定字体的文字
- 分析每个字符的 Unicode 码点
- 用
fonttools对字体文件进行子集化（subset），只保留用到的字形 - 输出压缩后的字体文件
安装
npm i font-spider-plus -g
安装后提供 fsp 命令行工具。
基本用法
压缩本地页面：
fsp local index.html
压缩线上页面：
# 初始化配置文件
fsp init
# 编辑 fspconfig.js，填入 URL 和字体路径
# 然后执行
fsp run
实际效果
在我的项目中，使用字蛛+ 的核心思想对自托管字体进行压缩，效果非常显著：
| 字体 | 压缩前 | 压缩后 | 节省 |
|---|---|---|---|
| 玄宗体 | 37MB | 40KB | 99.9% |
| 朱雀仿宋 | 8.4MB | 1.3MB | 84.5% |
| 佑字 | 8.2MB | 1.3MB | 84.1% |
| 平方相思体 | 3.6MB | 0.7MB | 80.6% |
| 夏日手写 | 4.8MB | 0.8MB | 83.3% |
| 合计 | 61.7MB | 4.1MB | 93.4% |
注：玄宗体只用于首页标题「人生若只如初见」，因此压缩后仅保留这 7 个汉字，体积从 37MB 降至 40KB。
与 CDN 方案的配合
字蛛+ 最适合与 Google Fonts CDN + 自托管 的组合方案配合使用：
- 主流字体（Inter、Noto Serif SC 等）→ Google Fonts CDN 加载，速度快、不占服务器带宽
- 装饰性字体（玄宗体、朱雀仿宋等）→ 自托管，用字蛛+ 压缩后体积极小
注意点
- 字符集覆盖：如果页面内容是动态的（如歌词、用户生成内容），确保压缩前包含所有可能出现的字符，否则会出现缺字
- 原始备份：压缩会直接修改原字体文件，建议先备份
- fonttools 的坑：
fontTools.subset在包含大范围标点符号时，偶发丢失部分 CJK 字符，建议手动指定标点字符集