WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

来源：动视网责编：小采时间：2020-11-27 16:27:30

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css_WEB-ITnose:字蛛是一个 WebFont 智能压缩工具，它能自动化分析页面中所使用的 WebFont 并进行按需压缩，通常好几 MB 的中文字体可以被压缩成几 KB 大小。字蛛主页： http://font-spider.org 字蛛从 2014 年 7 月诞生以来，时隔近两年，终于发布了 v1.0.0

推荐度：

点击下载本文 文档为doc格式

导读WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css_WEB-ITnose:字蛛是一个 WebFont 智能压缩工具，它能自动化分析页面中所使用的 WebFont 并进行按需压缩，通常好几 MB 的中文字体可以被压缩成几 KB 大小。字蛛主页： http://font-spider.org 字蛛从 2014 年 7 月诞生以来，时隔近两年，终于发布了 v1.0.0

字蛛是一个 WebFont 智能压缩工具，它能自动化分析页面中所使用的 WebFont 并进行按需压缩，通常好几 MB 的中文字体可以被压缩成几 KB 大小。

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

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

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

得到 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 远比上面示例页面复杂，需要处理：

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

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

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

推荐度：

点击下载本文 文档为doc格式

标签：智能压缩 html

热门焦点

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

面朝大海，春暖花开

查找字符

伪元素

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

最新推荐

猜你喜欢

热门推荐

WebFont智能压缩工具&mdash;&mdash;字蛛1.0.0正式版发布_html/css

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

面朝大海，春暖花开

查找字符

伪元素

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css

最新推荐

猜你喜欢

热门推荐

WebFont智能压缩工具——字蛛1.0.0正式版发布_html/css