Web前端开发 fontSpider（让自定义字体成为可能）

场景：移动开发中需要用到特殊字体，但是一个字体文件大小有8M。
fontSpider：通过使用gulp（或者grunt，这里我使用gulp）插件，把你的页面中没有用到的字从字体文件中去掉。从而实现压缩的效果。其实这个也不叫压缩，只是别没有用到的东西去掉而已，只是这是一个字体文件
（看到这里或许有人会想：为什么不用一张图片搞定呢，因为内容有可能是随机的。就是在会出现有很多种情况下，使用图片的话就需要多少种情况就得切多少张图片的）

举个栗子：

!(attimg://article/content/picture/201603/03/174307uyqy4ejhqsg8d8gh.png)

这里是一个结果页面，这是 什么卦、卦辞、推断不确定，有64种情况，使用特殊字体，字体源文件8+MB。
步骤：
1、安装 nodejs
2、到gitbub上下载使用gulp-font-spider的源码：地址
3、在项目路径（下图是要进到suangua或者test文件夹，这两个文件夹里都各自有个配置文件gulpfile.js，不用修改，看一下路径都没错就ok了）下依次执行 npm install gulp , npm install font-spider, npm install through2。如图效果：

!(attimg://article/content/picture/201603/03/175322ut5aaa7la7amfi5l.png)

4、插件下载安装完之后，这里有一个就是，怎样才能设置哪些字体是需要的，因为这个fontSpider工具不具备识别js添加的内容。
我的数据文字都在一个数组里的，js遍历一下，把所有有可能需要显示的文字都打印出来，在网页上查看，然后选择复制，再粘贴到index.html文件中。这样子，需要显示的文字都写死在页面中，写死这个很重要
，让fontSpider能识别需要用到的文字。
5、命令行执行gulp就能生成需要的字体文件（所有的命令行执行都要在项目目录下的），如图：

!(attimg://article/content/picture/201603/03/175603tn96uq46ot7vnpo4.png)

6、最后把这些生成的字体文件拷到开发环境目录下使用就好了，最后最关心的就是出来的文件大小是多少了，我这里用到的文字大概有3000个，然后字体文件是223k。