---- 淘宝优惠券 ----资源下载 ---域名问题某些图片和js资源无法访问,导致一些代码实例无法运行!(代码里gzui.net换成momen.vip即可)

WebFont 智能压缩工具——字蛛 1.0.0 正式版

前端开发 蚂蚁 1392℃ 0评论

http://mini.eastday.com/a/160513062848155.html

前言

看到字蛛的时候,不知道你会想起什么?这个由artTemplate作者@糖饼开发一个工具,它能做什么,以及它的原理是什么呢,期待你继续往下看。本文由@糖饼投稿。

正文从这开始~

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

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

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

支持绝大多数的中英文 Truetype 字体

支持开源图标字体库 (New: v1.0.0新特性)

支持 CSS 伪元素解析,支持 与 表达式

支持远程页面解析,并支持资源映射

支持四种样式规则: 、、 、

支持四种调用方式:命令行、Gulp、Grunt、JS Api

性能、稳定性大幅提高

新特性:图标字体库压缩

得益于对 CSS 伪元素的支持,除了常规中英文字体压缩之外,v1.0.0 还带来了万众期待的——图标字体压缩支持,能够支持业界流行的开源图标字库。

以Font Awesome为例,它是一个典型的开源图标字体项目,目前包含有 628 个图标,并且还不断在添加中。虽然它已经做了很多优化,但字库的体积在移动端来说依然偏大,会影响页面载入速度。使用字蛛可以删除掉字体中没有用到的图标,将字体瘦身。例如一个使用Font Awesome的示例页面:

输入 命令,启动字蛛进行字体压缩:

经过字蛛分析与压缩处理后,Font Awesome字体中只保留了页面所用到的 20 个图标,ttf 格式字体体积由142KB 降为6KB,如果再配合使用 Webpack 等前端工具将字体 Base64 编码后内嵌到 CSS 中,载入速度可以进一步提升。

爬虫实现原理

为什么字蛛能够找到字体中没有使用的字形数据?这里就涉及到对 HTML 与 CSS 的静态分析。

虚拟浏览器技术

字蛛 v1.0.0 版本使用了虚拟浏览器技术来实现 HTML 与 CSS 加载与解析,爬虫模块所依赖的浏览器相关 API 均为它提供。

处理 标签以及资源定位

加载 标签或 语句导入的 CSS 文件

处理 CSS Unicode 字符

管理网络请求,处理资源映射配置

支持 CSS3 选择器、样式表树、文本节点读取

由于虚拟浏览器部分涉及到太多的东西,计划在另外一篇文章中单独分享。这部分代码已经分离出来并开源,有兴趣可以去了解:https://github.com/aui/browser-x

操作样式语法树

字蛛是通过解析样式表语法树(CSSOM)来获得 WebFont 信息,在浏览器中可以通过来访问 CSS 的语法树,遍历 CSS 规则的函数实现:

注:浏览器环境不允许访问跨域后的 CSSOM,但虚拟浏览器没有做此限制

查找字体

遍历样式表每一个规则,收集 信息:

以如下页面作为示例:

得到 :

查找字符

利用来获取使用 WebFont 的字符:

此时 :

伪元素

此时 WebFont:

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

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

伪类选择器

缩写

行内样式

完整的字体匹配算法

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

相关链接

字蛛:主页

字蛛:更新日志

字蛛: v1.0.0 接口文档

字蛛:grunt 插件

字蛛:gulp 插件

字蛛:迟到的中文 WebFont

字蛛:虚拟浏览器技术——BrowserX

思源黑体:简体中文 ttf 版本

思源黑体:繁体中文 ttf 版本

Google:网页字体优化

Baidu:fontmin

 

转载请注明:有爱前端 » WebFont 智能压缩工具——字蛛 1.0.0 正式版

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情