在所有字体完全加载后运行插件，使用 WebFontLoader
Posted
技术标签:
【中文标题】在所有字体完全加载后运行插件，使用 WebFontLoader【英文标题】：Running a plugin after all fonts are fully loaded, using 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 & Lone Ranger</span>
</h1>
...
<script>
WebFont.load(
active: function()
$('#mainhead').slabText();
)
</script>
</body>
当所有字体加载完成后，webFontLoader 还会将 .wf-active 类添加到 html 元素中，如果有帮助的话。
【问题讨论】：
【参考方案1】：在同一个 WebFont-load() 事件中调用“google”和“active”对我有用：
<script>
WebFont.load(
google:
families: ['Roboto:300', 'Roboto+Slab:400']
,
active: function()
$('#mainhead').slabText();
);
</script>
【讨论】：
以上是关于在所有字体完全加载后运行插件，使用 WebFontLoader的主要内容，如果未能解决你的问题，请参考以下文章
任何人都可以将这两种字体用作 Webfont 吗？我几乎使用 webfont 生成器服务，但没有一个有效
凯尔特字体 - eot, woff, ttf - webfont