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标签中对应的文字)

猜你喜欢

转载自blog.csdn.net/konghouy/article/details/82462819