Font-Spider 字蛛
Author: Vic.Wang 2016/11/07
前几天CY兄介绍了款node工具给我,是解决中文字体太大,按需加载文字的,用了下,感觉很棒,分享给大家。
在以前的开发中,拿到设计师给的视觉稿,总是要将设计稿中个性的文字都切成图片,因为用的是个性字体,你不能保证所有用户的电脑上都安装了这种字体,甚至可以说主动安装这些字体的用户是很少的,为了视觉稿的还原,为了设计师的高端大气上档次的页面,只能弄成图片呗。
页面中用到的个性字体不多的地方还好,如果用到的很多,那切图会变得繁琐,也会多出很多的请求数,就是用雪碧图拼也是麻烦的。
图片也不利于搜索引擎优化,也没法选中,用户体验不好。
但是直接引入中文字体,字体文件又太大,下载慢,浪费带宽。
传统方法的困境,请看官方团队的博文《设计师的春天:中文WebFont解决方案Font-Spider(字蛛)》
安装:
先安装好NodeJS,然后在命令行工具中执行npm安装
npm install font-spider -g
使用:
/*声明 WebFont*/
@font-face {
font-family: 'ziti';
src: url('../font/ziti.eot');
src:
url('../font/ziti.eot?#font-spider') format('embedded-opentype'),
url('../font/ziti.woff') format('woff'),
url('../font/ziti.ttf') format('truetype'),
url('../font/ziti.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用选择器指定字体*/
.home h1, .demo > .test {
font-family: 'ziti';
}
.ttf 格式的字体文件必须存在的,其他的工具会自动生成。
引入的字体最好拷贝一份到要压缩的目录,生成的时候是会删除没用到的文字,修改字体文件的,这是为了避免影响系统字体。
压缩:
font-spider <filename.html>
也可以用通配符 *.html
用命令行进入你要压缩的目录,使用上面的命令,运行完就可以得到删除后的字体了,是不是小了很多呢?
更多阅读:
设计师的春天:中文WebFont解决方案Font-Spider(字蛛)
本文地址:http://blog.mingsixue.com/node/node-font-spider.html
文章若需转载,请附上原文链接,谢谢配合。^_^