网站多处使用中文特殊字体,而导入字体文件随便十几M,做成图片又不好维护,介绍一个简单实用的字体压缩工具。
中文字体压缩器——字蛛
css font-face 引入中文字体必备神器
字蛛通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨浏览器使用的格式。
中文 WebFont 自动化压缩工具。官方网站:http://font-spider.org
1、安装
安装nodejs
先安装nodejs,传送门:http://nodejs.org
安装font-spider
安装好nodejs后执行
npm install font-spider -g
windows 需要安装 perl 环境才可以运行。
GruntJS 用户可使用 gruntjs 插件。
2、使用
- 在 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';
}
@font-face
中的src
定义的 .ttf 文件必须存在,其余的格式将由工具自动生成
开发阶段请使用 相对路径 的 CSS 与 WebFont
压缩
执行font-spider命令
font-spider dest/*.html
(此处不要用gitbash等工具执行,直接cmd)
页面依赖的字体将会自动压缩好,原 .ttf 字体会备份
源码:github.com/aui/font-spider
感谢:@zhangge