基于font-spider的前端字库优化

           我手头上有个线上的项目，首页加载速度比较慢，在测试环境中页面呈现出来需要5S左右，正式环境也需要2~3秒，对于用户而言，这个速度显然是无法忍受的。因此，我开始对这个项目做优化。在chrome浏览中按F12打开开发者工具，进入network那一栏，重新加载页面，我发现了这个项目的字体文件love.ttf“”加载居然花费了1.35秒的时间，如下图所示。

       针对这个问题，我首先想到的是压缩字体文件大小，毕竟一个168k的字体文件还是有点偏大的，在网上查找压缩字体文件的工具，发现大家推荐最多的是font-spider这个工具，于是用这个工具试了试，完美将文件压缩到7.9k，加载时间也减小到118ms。

       下面介绍我使用这个工具的过程。

        第一步，cnpm安装font-spider。没有安装node.js、cnpm的请自行查找资料，网上教程很多。

        第二步：检查css文件中引用字体样式的写法是否正确。

@font-face {
    font-family: 'love';
    src:
        url('../fonts/love.ttf?modifiedTime=1478241184') format('truetype'),
        url('../fonts/love.woff?modifiedTime=1478241184') format('woff'),
        url('../fonts/love.svg?modifiedTime=1478241184') format('svg');
    font-weight: normal;
    font-style: normal;
}

.icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'love' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

       第三步：运行font-spider命令

       我的文件结构：

       window下cmd命令及执行结果：

       注意事项：

       font-spider的原理是遍历所有.html文件，搜索被用到的字体，如果字体是用js动态加载的，就搜索不到，比如下面这段代码：

       这段代码是用underscore.js中的template模板函数添加的，所以一开始这段代码中使用到的2个字体未被添加到新生成的字体文件中，要解决这个问题也不难，将这段代码

标签移到html文件的dom中就可以了。

       参考资料：Font-Spider 一个神奇的网页中文字体工具，就是这么任性。

文中如有错误或有不同疑问，欢迎留言讨论！