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

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

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

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

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

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

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

第二步：检查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的前端字库优化

注意事项：

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

<script type="text/template" class="project-base-tmpl">
  <div class="cover"><img src="<%- _l.cfg.imgPrefix + project.topImg  %>">
    <div class="title"><%- project.projectTitle %></div>
  </div>
  <% if(project.type != 1){ %>
  <div class="progress-block">
    <div class="progress">
      <%
      var donationPercentage = ((project.haveAmount / project.targetAmount )*100).toFixed(2);
      donationPercentage = donationPercentage > 100 ? 100 : donationPercentage;
      %>
      <div style="width:<%- donationPercentage %>%" class="bar"></div>
    </div>
    <span class="text"><%- donationPercentage %>%</span>
  </div>
  <% } %>
  <ul class="projece-data">
    <li>
      <div class="num"><%- project.haveAmount %></div>
      <div class="text"><i class="icon icon-suitcase"></i>已筹</div>
    </li>
    <li>
      <div class="num"><%- project.type != 1 ? project.targetAmount : '长期' %></div>
      <div class="text"><i class="icon icon-trophy"></i>目标</div>
    </li>
    <li>
      <div class="num"><%- project.loveNum %></div>
      <div class="text"><i class="icon icon-heart"></i>爱心(份数)</div>
    </li>
  </ul>
</script>

这段代码是用underscore.js中的template模板函数添加的，所以一开始这段代码中使用到的2个字体未被添加到新生成的字体文件中，要解决这个问题也不难，将这段代码<ul>标签移到html文件的dom中就可以了。

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

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

秒客网

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

相关文章