字蛛 font-spider http://font-spider.org/ 通过分析本地 CSS 与 html 文件获取 webFont 中没有使用的字符, 并将这些字符数据从字体中删除以实现压缩, 同时生成跨浏览器使用的格式.
字蛛是一个年代比较久远的项目了, 早年间文案之类还是写在 html 中, 如今 SPA 等大行其道, html 在很多时候只是一个容器, 使用 React, Angular 等类库的 JavaScript 代码会负责渲染这个容器中的内容, 并和用户交互. 这样就引发了一个问题, 如果你所用到的中文字都是在 JavaScript 中动态生成的, 那你让字蛛分析你的 html 岂不是无济于事?
之前鹅厂的工程师为了解决这个问题, 开发了字蛛 + font-spider-plus https://github.com/allanguys/font-spider-plus
font-spider-plus(字蛛 +)是一个智能 WebFont 压缩工具, 它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩.
Allan 的这个项目更进一步, 通过无头浏览器来爬取当前页面上的文字来动态生成精简版的 webfont.
但是字蛛 + 依赖 Chrome Puppeteer 无头浏览器, 需要安装近两百兆的 Chrome, 比较容易失败 (比如我在公司内网环境, 还需要绕过公司代理), 对于我的需求有些杀鸡用牛刀了. 另外我怀疑通过 Chrome 无头浏览器在页面生成阶段遍历页面上的字体也会有问题, 比如我的弹窗(modal) 是在用户交互之后才插入 dom 的, 这样弹窗上的字体就捕获不到了吧.
FSW (font-spider-walker) https://github.com/iplus26/font-spider-walker 这个项目通过本地分析源代码来动态生成 webfont. 这个项目很简单, 无需比较重的依赖, 是直接遍历你的源码目录(可以指定目录), 找出所有用到的中文字, 调用字蛛生成你所需要的中文字体. 这样无论你是 JavaScript 项目, 还是 typescript 项目(可以指定文件后缀), 无论你包含中文字体的结构是何时插入 dom 的, FSW 都可以捕获到.
如果这个非常简单的小工具可以解决你的燃眉之急, 欢迎在 GitHub 给我点个 star; 如果你发现了问题, 并且希望 FSW 为你解决
来源: https://www.qcloud.com/developer/article/1160838