延迟画布javascript的执行，直到字体加载完毕

我在canvas中制作一些使用web服务字体的东西，发生的事情是，当canvas第一次加载字体时，我从google字体加载的字体还没有到达，所以在最短的时间内，canvas中只有普通字体，然后它切换到我下载的字体

这是一个小细节，但非常烦人。我想知道是否有任何方法可以预加载字体，也就是说，在我确定已经有了字体之前，不要执行与画布相关的javascript代码

字体放置在html的标题中：

<link href='https://fonts.googleapis.com/css?family=Stalinist+One' rel='stylesheet' type='text/css'>

---

以及文件底部的js链接，就在正文关闭之前。

使用谷歌的WebFontLoader脚本

WebFontLoader的

fontactive

回调相当于img元素的

onload

WebFontLoader完全正确，WebFontLoader由Adobe自己维护（TypeKit！）——所以这个CDN链接不太可能消失

虽然我推荐WebFontLoader，但您可以通过检测元素的宽度何时更改（更改的宽度==字体已加载）来自行修改

font.onload

Adobe已经创建了

Adobe Blank

字体，以便在加载字体时进行测试。AdobeBank以零宽度开始。下面是如何使用AdobeBank作为

font.onload

，正如Ken Lunde博士在这篇有用的TypeKit博客文章中所概述的：

在CSS文件中包含Adobe Blank作为数据URI

在CSS规则中为某些包含文本的DOM元素指定“font-family:SomeWebFont”和“adobeblank”（因此，使用常规字体呈现时，宽度将不为零）。一个例子是绝对位于屏幕外的元素

检查DOM元素的宽度。如果为零，则表示尚未加载某些WebFont。如果大于零，则为

祝你的项目好运