在所有字体完全加载后运行插件，使用 WebFontLoader答案

【问题标题】：Running a plugin after all fonts are fully loaded, using WebFontLoader在所有字体完全加载后运行插件，使用 WebFontLoader
【发布时间】：2014-01-08 10:59:11
【问题描述】：

我有一个名为slabtext 的插件，我只想在我的字体完全加载后运行它。我尝试了以下方法，但它不起作用（可能是关闭正文之前的脚本中的错误）。有没有一种简单的方法可以仅在字体完全加载后才运行 Slabtext 脚本，我已经尝试过 $(document).ready(function()，但它没有帮助

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Roboto:300', 'Roboto+Slab:400']
        }
    });
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/slabText/2.3/jquery.slabtext.js"></script>
</head>

<body>
    <h1 id="mainhead">
        <span class="slabtext">For one night only</span>
        <span class="slabtext">Jackie Mittoo</span>
        <span class="slabtext">with special Studio One guests</span>
        <span class="slabtext">Dillinger &amp; Lone Ranger</span>
    </h1>
...
<script>
    WebFont.load({
        active: function() {
            $('#mainhead').slabText();
        }
    })
</script>
</body>

当所有字体加载完成后，webFontLoader 还会将 .wf-active 类添加到 html 元素中，如果有帮助的话。

【问题讨论】：

标签： javascript fonts webfont-loader

【解决方案1】：

在同一个 WebFont-load() 事件中调用“google”和“active”对我有用：

<script>
  WebFont.load({
    google: {
      families: ['Roboto:300', 'Roboto+Slab:400']
    },
    active: function() {
      $('#mainhead').slabText();
    }
  });
</script>

【讨论】：