字蛛(FontSpider)-中文WebFont自动化压缩工具,让网页自由引入中文字体成为可能!

2015-03-05阅读(27814)评论(0)牵着狗狗看MM

苏州实时公交查询

FontSpider:字蛛中文字体压缩器是一个可以让网页自由引入中文字体的源码工具,通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
window
官网:http://font-spider.org/

特性

  1. 轻巧:数 MB 的中文字体可被压成几十 KB
  2. 简单:完全基于 CSS,无需 js 与服务端支持
  3. 兼容:自动转码,支持 IE 与标准化的浏览器
  4. 自然:文本支持选中、搜索、翻译、朗读、缩放

原理

字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,并生成跨浏览器使用的格式。

  1. 构建 CSS 语法树,分析字体与选择器规则
  2. 使用包含 WebFont 的 CSS 选择器索引站点的文本
  3. 匹配字体的字符数据,剔除无用的字符
  4. 编码成跨浏览器使用的字体格式

安装

安装好 nodejs,然后执行:

[html]pm install font-spider -g
[/html]

  • windows 需要安装 perl 环境才可以运行。
  • GruntJS 用户可使用 gruntjs 插件

使用范例

在 CSS 中声明字体

[css]/*声明 WebFont*/
@font-face {
font-family: ‘pinghei’;
src: url(‘../font/pinghei.eot’);
src:
url(‘../font/pinghei.eot?#font-spider’) format(’embedded-opentype’),
url(‘../font/pinghei.woff’) format(‘woff’),
url(‘../font/pinghei.ttf’) format(‘truetype’),
url(‘../font/pinghei.svg’) format(‘svg’);
font-weight: normal;
font-style: normal;
}

/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: ‘pinghei’;
}
[/css]

  1. @font-face中的src定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
  2. 不支持动态插入的 CSS 规则与字符
  3. 不支持 CSS content属性插入的字符

压缩 WebFont

[html]font-spider [options] <htmlFile …>
[/html]

支持通配符,例如:font-spider dest/*.html

Options

[js]-h, –help 输出帮助信息
-V, –version 输出当前版本号
–info 仅提取 WebFont 信息显示,不压缩与转码
–ignore <pattern> 忽略的文件配置(可以是字体、CSS、HTML)
–map <remotePath,localPath> 映射 CSS 内部 HTTP 路径到本地
–debug 开启调试模式
–no-backup 关闭字体备份功能
–silent 不显示非关键错误
–revert 恢复被压缩的 WebFont
[/js]

字体兼容性参考

格式 IE Firefox Chrome Safari Opera iOS Safari Android Browser Chrome for Android
.eot 6
.woff 9 3.6 5 5.1 11.1 5.1 4.4 36
.ttf 3.5 4 3.1 10.1 4.3 2.2 36
.svg 4 3.2 9.6 3.2 3 36
赞(0) 打赏
转载请注明来源:Web前端(W3Cways.com) - Web前端学习之路 » 字蛛(FontSpider)-中文WebFont自动化压缩工具,让网页自由引入中文字体成为可能!
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏