【第578期】WebFont 智能压缩工具——字蛛 1.0.0 正式版
前言
看到字蛛的时候，不知道你会想起什么？这个由artTemplate作者@糖饼开发一个工具，它能做什么，以及它的原理是什么呢，期待你继续往下看。本文由@糖饼投稿。
正文从这开始～
字蛛是一个 WebFont 智能压缩工具，它能自动化分析页面中所使用的 WebFont 并进行按需压缩，通常好几 MB 的中文字体可以被压缩成几 KB 大小。
字蛛主页：
字蛛从 2014 年 7 月诞生以来，时隔近两年，终于发布了 v1.0.0 正式版本，改进如下：
支持绝大多数的中英文 Truetype 字体
支持开源图标字体库 （New: v1.0.0新特性）
支持 CSS 伪元素解析，支持
content: "string"与content: attr(value)表达式支持远程页面解析，并支持资源映射
支持四种样式规则：
<style>、<link>、@import、style=""支持四种调用方式：命令行、Gulp、Grunt、JS Api
性能、稳定性大幅提高
新特性：图标字体库压缩
得益于对 CSS 伪元素的支持，除了常规中英文字体压缩之外，v1.0.0 还带来了万众期待的——图标字体压缩支持，能够支持业界流行的开源图标字库。
以 为例，它是一个典型的开源图标字体项目，目前包含有 628 个图标，并且还不断在添加中。虽然它已经做了很多优化，但字库的体积在移动端来说依然偏大，会影响页面载入速度。使用字蛛可以删除掉字体中没有用到的图标，将字体瘦身。例如一个使用 的示例页面：
输入 font-spider 命令，启动字蛛进行字体压缩：
经过字蛛分析与压缩处理后， 字体中只保留了页面所用到的 20 个图标，ttf 格式字体体积由 142 KB 降为 6 KB，如果再配合使用 Webpack 等前端工具将字体 Base64 编码后内嵌到 CSS 中，载入速度可以进一步提升。
爬虫实现原理
为什么字蛛能够找到字体中没有使用的字形数据？这里就涉及到对 HTML 与 CSS 的静态分析。
虚拟浏览器技术
字蛛 v1.0.0 版本使用了虚拟浏览器技术来实现 HTML 与 CSS 加载与解析，爬虫模块所依赖的浏览器相关 API 均为它提供。
处理
<base>标签以及资源定位加载
<link>标签或@import语句导入的 CSS 文件处理 CSS Unicode 字符
管理网络请求，处理资源映射配置
支持 CSS3 选择器、样式表树、文本节点读取
由于虚拟浏览器部分涉及到太多的东西，计划在另外一篇文章中单独分享。这部分代码已经分离出来并开源，有兴趣可以去了解：
操作样式语法树
字蛛是通过解析样式表语法树（CSSOM）来获得 WebFont 信息，在浏览器中可以通过 来访问 CSS 的语法树，遍历 CSS 规则的函数实现：
注：浏览器环境不允许访问跨域后的 CSSOM，但虚拟浏览器没有做此限制
查找字体
遍历样式表每一个规则，收集 CSSFontFaceRule 信息：
得到 webFonts：
查找字符
利用 来获取使用 WebFont 的字符：
此时 webFonts：
伪元素
此时 WebFont：
完整代码在线演示：
至此，以上例子已经成功演示了字蛛爬虫查找字体、查找文本的工作原理。实际上 HTML 与 CSS 远比上面示例页面复杂，需要处理：
伪类选择器
font缩写行内样式
完整的字体匹配算法
由于篇幅有限，上述细节部分可以参见。
相关链接
后语
欲详细了解字蛛的原理，可以点击下方的“阅读原文”查看～