我遇到的问题应该是一个相当明显的问题。
Webfont Loader文档声明将其作为“HTML文档的<head>中的第一个元素”。它还包括活动/非活动回调选项，这些选项在加载字体或无法加载/超时时调用。
问题是，如果我将回调函数紧跟在脚本块后面，那么回调函数在那时是未定义的。
我的代码如下：
<head>
<script type="text/javascript">
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive(),
inactive: doInactive()
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
// ... other code ...
<script>
function doActive() {
// ...
}
function doInactive() {
// ...
}
</script>
</head>
这只是默认的Google代码，加上两个回调。
我看到的唯一明显的选择是在定义其他函数后包含webfont加载器，但这并不优雅。我知道有一个更好的解决方案，但我的Google-fu没有找到它。
你的错是直接执行回调。
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive(), // () executes directly
inactive: doInactive()
};
而不是这样你应该尝试：
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: doActive, // Only the function. The library will execute the function
inactive: doInactive
};
如果库执行您的回调，则该函数应该可用
如果其他人正在寻找答案，这不是最优雅（或正确）的方法，我敢肯定，但这是有效的。
<script>
var fontsLoaded = false;
WebFontConfig = {
google: { families: [ 'Playball::latin' ] },
active: function() { fontsLoaded = true },
inactive: function() { fontsLoaded = -1 }
};
(function() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
})(); </script>
// ... other stuff ...
<script>
var MAX_WAIT = 15000; var startTime = Date.now(); var tx;
checkLoaded();
function checkLoaded() {
clearTimeout(tx);
if (fontsLoaded === -1) { doInactive(); }
else if (fontsLoaded) { doActive(); }
else {
if (Date.now()-startTime > MAX_WAIT) { doInactive(); }
else { tx = setTimeout(checkLoaded,100); }
}
}
</script>