字蛛主页： http://font-spider.org

字蛛从 2014 年 7 月诞生以来，时隔近两年，终于发布了 v1.0.0 正式版本，改进如下：

1. 支持绝大多数的中英文 Truetype 字体
2. 支持开源图标字体库 （New: v1.0.0新特性）
3. 支持 CSS 伪元素解析，支持 content: "string" 与 content: attr(value) 表达式
4. 支持远程页面解析，并支持资源映射
5. 支持四种样式规则：

   面朝大海，春暖花开

   得到 webFonts ：

   {    "demo-font": {        "family": "demo-font",        "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")",        "chars": ""    }}

   查找字符

   利用 document.querySelectorAll() 来获取使用 WebFont 的字符：

   // 获取当前节点所使用的 webFontfunction matchFontFamily(cssRule) {    var style = cssRule.style;    var family = style['font-family'];    return webFonts[family];}// 将 fontFace 与元素、字符关联起来eachCssRuleList(function(cssRule) {    if (cssRule instanceof CSSStyleRule) {        var selector = cssRule.selectorText;        var webfont = matchFontFamily(cssRule);        if (webfont) {            // 根据选择器来查找元素            var elems = document.querySelectorAll(selector);            Array.prototype.forEach.call(elems, function(element) {                // 获取元素的文本                webfont.chars += element.textContent;                // 将元素与字体关联起来                elements[webfont.family].push(element);            });        }    }});

   此时 webFonts ：

   {    "demo-font": {        "family": "demo-font",        "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")",        "chars": "面朝大海，春暖花开"    }}

   伪元素

   // 处理伪元素，找到继承的 webFonteachCssRuleList(function(cssRule) {    if (cssRule instanceof CSSStyleRule) {        var selector = cssRule.selectorText;        var pseudoName = /\:\:?(?:before|after)$/i;        if (!pseudoName.test(selector)) {            return;        }        // 查找伪元素所在的节点        selector = selector.replace(pseudoName, '');        var elems = document.querySelectorAll(selector);        // 获取伪元素 content 值        var content = cssRule.style.content.replace(/^["']|["']$/g, '');        for (var i = 0; i < elems.length; i ++) {            var elem = elems[i];            for (var family in webFonts) {                // 从伪元素自身不断冒泡，直到找到继承的字体                while (elem) {                    if (elements[family].indexOf(elem) !== -1) {                        webFonts[family].chars += content;                        break;                    }                    elem = elem.parentNode;                }            }        }    }});

   此时 WebFont：

   {    "demo-font": {        "family": "demo-font",        "src": "url(\"file:///Users/aui/Documents/demo-font.ttf\")",        "chars": "面朝大海，春暖花开————海子"    }}

   完整代码在线演示： https://jsfiddle.net/9ont96c4/2

   至此，以上例子已经成功演示了字蛛爬虫查找字体、查找文本的工作原理。实际上 HTML 与 CSS 远比上面示例页面复杂，需要处理：

   1. 伪类选择器
   2. font 缩写
   3. 行内样式
   4. 完整的字体匹配算法

   由于篇幅有限，上述细节部分可以参见 字蛛爬虫模块源码 。