web外部字库压缩（font-spider），安装，使用及陷阱

---

一、使用原因

在本地文件测试时，首屏时间加载速度很快，因为不存在网络传输，当把页面部署到服务器上线测试后，由于字库比较大，在1Mpbs的外网访问带宽下，字体加载需要1分钟。这显然是无法接受的。解决方案，将字库压缩。原理就是，只在字库中保留页面中出现的文字，将其他大量不用的文字删掉，大大提高访问速度。

二、安装nodejs

1.下载安装包

cd /usr/local
wget https://nodejs.org/dist/v4.4.4/node-v4.4.4-linux-x64.tar.xz

2.解压文件

tar -Jxv -f **.tar.xz(大写的J）

3.重命名便于操作

 mv node-v4.4.4-linux-x64  nodejs 

4.建立软连接，变为全局

ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ 
ln -s /usr/local/nodejs/bin/node /usr/local/bin/

5.验证安装是否成功，查看安装安装版本

node -v

三、使用font-spider这个软件进行自动压缩

font-spider是nodejs下的一个开源的小插件，所以使用时需要先安装nodejs。
font-spider的功能是压缩静态页面外部引入的字体，font-spider会自动筛选出对应的字体，将字库中不相关的字统统删掉，这样可以大大减小外部引入字体文件的大小。压缩效果十分显著。

1.安装font-spider

npm install font-spider -g

2.进行字库压缩

cd font-spider程序的位置，//在nodejs的安装目录下
font-spider html文件路径
如：/usr/local/nodejs/lib/node_modules/font-spider/bin/font-spider /usr/www/.html

运行结束后可以看到相关对应的压缩后字库中的文字，和大小。

3.陷阱

• 使用时必须是静态页面，框架路径不会进行字体压缩
• 压缩文字必须在HTML页面中，不能识别通过js，ajax，jsonp添加的文字
• css中必须选中HTML的文字，添加外部特定的字体。（font-spider是提取css中引入特殊字体在HTML标签中对应的文字）