使用 webfontloader 优化加载字体在网页中的显示体验

继上篇文章网页字体文件最后再加载实现方法，后写的一篇优化加载字体在网页中的显示体验。

上一篇文章的第一种方法，我在使用后，发现网页主体中的文字显示会延迟一段时间再加载，于是为了改进，又上网搜索相关内容，得出了本篇文章，优化方案。

现在说说第三种方式，也是最近在使用的一种方式，我个人比较偏向第三种，使用webfontloader.js实现。webfontloader.js下载地址：webfontloader/webfontloader.js at master · typekit/webfontloader (github.com)

当前方式是结合第一种方式，等所有字体加载完成再使用字体，否则就先使用默认字体，这样就可以在不影响用户阅读的情况下也可以加载字体，用户体验相对较好。

使用方式：

WebFont.load({
  google: {
    families: ['Roboto:300,400,500,700', 'Open Sans']
  },
  custom: {
    families: ['My Font'],
    urls: ['path/to/myfont.css']
  },
  active: function() {
    // 字体加载成功后执行的回调函数
  },
  inactive: function() {
    // 字体加载失败后执行的回调函数
  }
});

一个项目中的使用示例：

将样式创建好，然后使用webfontloader进行监听加载，要是加载完成，再将样式添加进去。
当然也可以将三种字体分开，这样就不捆绑在一起了。

<script>
        //最后加载字体，防止网页加载速度
        // 创建一个新的<style>标签
        var style = document.createElement('style');
        // 将字体文件链接放在<style>标签中
        style.textContent = `
            <?php if(!empty(_g('title_font'))){?>
            @font-face {
                font-family: 'indexTitleFont';
                src: url('<?php echo _g('title_font'); ?>') format('woff');
            }
            <?php }?>

            <?php if(!empty(_g('article_font'))){?>
            @font-face {
                font-family: 'article_font';
                src: url('<?php echo _g('article_font'); ?>') format('woff');
            }
            <?php }?>

            <?php if(!empty(_g('saying_font'))){?>
            @font-face {
                font-family: 'saying_font';
                src: url('<?php echo _g('saying_font'); ?>') format('woff');
            }
            <?php }?>
        `;
        WebFont.load({
            custom: {
                families: ['indexTitleFont', 'article_font','saying_font']
            },
            active: function() {
                // 字体加载完成后执行的操作
                document.head.appendChild(style);
            },
            inactive: function() {
                // 字体加载失败时执行的操作
                document.head.appendChild(style);
            }
        });
    </script>