中文 WebFont 自动化压缩工具,它能自动分析页面使用的 WebFont 并进行按需压缩,并不需要指定字体与字符。
在网页中呈现艺术字体,WebFont 会比图片拥有更好的体验,它支持选中、搜索、翻译、朗读、缩放等。字蛛作为一个 WebFont 压缩转码工具,拥有如下特性:
- 按需压缩:数 MB 的中文字体可被压成几十 KB
- 简单可靠:完全基于 CSS 规则,无需 js 与服务端辅助
- 自动转码:支持 IE 与标准化的浏览器
安装好 nodejs,然后执行:
npm install font-spider -g
/*声明 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';
}
特别说明:
@font-face
中的src
定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
font-spider [options] <htmlFile ...>
1. 使用通配符压缩多个 HTML 文件关联的 WebFont:
font-spider dest/*.html
2. 使用 --map <remotePath,localPath>
参数将线上的页面的 WebFont 映射到本地来进行压缩:
font-spider --map http://font-spider.org/font,./font http://font-spider.org/index.html
3. 使用 --ignore <pattern>
忽略文件:
font-spider --ignore *-icon.css,*.eot dest/*.html
-h, --help 输出帮助信息
-V, --version 输出当前版本号
--info 输出 WebFont 的 JSON 描述信息,不压缩与转码
--ignore <pattern> 忽略的文件配置(可以是字体、CSS、HTML)
--map <remotePath,localPath> 映射 CSS 内部 HTTP 路径到本地(支持正则表达式)
--no-backup 关闭字体备份功能
--debug 调试模式
使用 font-spider 的 API,可以构建在线动态字体压缩服务。
文档参见:API.md
- 仅支持
link
与style
标签引入的样式,不支持元素行内样式 - 仅支持固定的文本与样式,不支持 javascript 动态插入的元素与样式
- 不支持字体继承(例如 CSS
content
属性插入的字符需要声明font-family
) - .otf 字体需要转换成 .ttf 才能被压缩
- 仅支持
utf-8
编码 - 不支持 CSS
unicode-range
属性
格式 | 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 |
来源:http://caniuse.com/#feat=fontface
字蛛的发展离不开以下开源项目的支持:
- fontmin 来自百度前端团队的字体压缩库*(字蛛 v0.2 版本使用它取代了内置的字体压缩库 #18)*
- cssom 标准化的 CSS 解析库*(字蛛 v0.3 版本使用它取代了 css)*
- cheerio 轻量的 HTML 解析库*(字蛛 v0.2 版本使用它取代了 jsdom)*
字蛛愿以开放的心态和开源社区一起推动中文 WebFont 发展。
字体受版权保护,若在网页中使用商业字体,请联系相关字体厂商购买授权