Web字体载入利器（Web Font Loader）使用详解（Web字体加载缓慢解决办法）

网上对web font loader 的使用介绍并不多，我也是在空闲的时候偶然在一本书上看到对于字体加载缓慢的处理方法中有提到一句web font loader。在此之前，我从未使用过web font loader。于是我在网上搜索关于对此的介绍，发现介绍并不多。我想应该目前使用的人也不多吧。以至于没有过多的人在网上对它做详细的介绍。
在我查阅的资料中，地址(***https://www.w3ctech.com/topic/1624***)算是写得稍微详细一点的，其余的都不怎么样，当然有可能是我查询的资料不够多。因之前的一些项目中我遇到过此类问题，当时的解决办法是直接干掉了体积比较大的字体，就使用默认字体代替，但这明显违背了最初的设计。直到今天，当我看到web font loader时，赶紧看了相关资料后自己动手写了，发现这样的字体过渡效果真的不错。
Web Font Loader 的出现背景我想不用我多说了，我就直接介绍使用方法吧。

1.在html中嵌入Web字体载入利器代码

(function(d){  
  var wf = d.createElement("script"),  
      s = d.scripts[0];  
  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';  
  s.parentNode.insertBefore(wf,s);
})();

或者直接在head标签中引入：
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async></script>

2.使用WebFontConfig对象的方式来检查这些字体是否被载入

<script type="text/javascript">
      WebFontConfig = {
        custom: {
          families: [
            'Hanalei+Fill',
            'Preahvihear',
            'Modern+Antiqua',
            'Oswald',
          ],
          urls: [
            'https://fonts.font.im/css?family=Hanalei+Fill',
            'https://fonts.font.im/css?family=Preahvihear',
            'https://fonts.font.im/css?family=Modern+Antiqua',
            'static/css/fonts.css',
          ]
        },
        timeout: 2000
      };
 </script>

上面的代码中，families数组中是引用字体的名称，urls中是引用字体的文件路径（这些文件都是css文件，即使用@font-face{}引入的字体的代码文件）如下图Url为：https://fonts.font.im/css?family=Preahvihear：

WebFontConfig代码中我引入了google fonts的三种英文字体，最后一种
Oswald字体是引用的我本地的字体。如下：

字体加载完成后，在你的html标签上会新增一些class，这些class都是和你引入的字体一一对应的。如：

在css中如何使用这些字体呢？其实和平时使用的font-family类似。我以google字体中的【Modern Antiqua】字体为例，见下图：

既然我们在字体加载完成后在html标签上会新增额外的class,那么我们可以利用这一点写一些新的样式，如：

.font-box{
  font-family:Helvetica,arial,sans-serif;
  font-weight: 400;
  font-style: normal;
}
.wf-modernantiqua-n4-active .font-box{
    font-family:'Modern Antiqua',Helvetica,arial,sans-serif;
    font-weight: 400;
    font-style: normal;
}

上面的代码中，如果在字体加载失败的情况下使用字体Helvetica,arial,sans-serif,当字体加载成功后就可以使用引入的字体了顺序为：‘Modern Antiqua’,Helvetica,arial,sans-serif；这样就能实现在字体未加载完成前使用默认字体，也不至于让页面显示空白了。

Web Font Loader为以下事件提供了接入点：
loading:开始加载字体
active:字体加载完成
inactive:字体加载失败
如：字体加载成功的class:wf-modernantiqua-n4-active
字体加载失败的class:wf-modernantiqua-n4-inactive
感兴趣的朋友可以自己尝试写一下看看效果。

另：
在WebFontConfig的配置中，families的配置可以设置使用的字体变体，如：

<script type="text/javascript">
      WebFontConfig = {
        custom: {
          families: [
            'Hanalei+Fill:n4,n5',
          ],
          urls: [
            'https://fonts.font.im/css?family=Hanalei+Fill',
          ]
        },
        timeout: 2000
      };
 </script>

其中n4表示“normal样式，400精细”，以此类推。

以上为本人对Web Font Loader的总结，如有误或不足，欢迎留言指出。