Font-Spider 字蛛

前几天 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(字蛛)

字蛛官网

字蛛Github