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