延迟执行JavaScript的画布，直到字体已经加载

Question

我在画布上使用Web服务的字体的东西，会发生什么，当画布第一次加载字体，我从谷歌字体加载，还没有到达那么短暂的时刻，画布中只有简单的字体，然后切换到我下载的字体。

这是一个小细节，但非常讨厌。我想知道是否以任何方式预先加载字体，即不执行画布相关的JavaScript代码，直到我确定已经有字体。

字体被放置在html头：

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

，并在文件的底部的JS链接，只是身体的关闭之前。

Answer 1

使用谷歌的WebFontLoader脚本

https://github.com/typekit/webfontloader

WebFontLoader的fontactive回调是img元素的onload的等价物。

WebFontLoader完全正确，WebFontLoader由Adobe自己维护（TypeKit！） - 因此CDN链接很可能不会消失。

虽然我推荐WebFontLoader，但您可以通过检测元素宽度的变化（更改宽度==字体已加载）来自行破解font.onload。

为了在加载字体时进行测试，Adobe创建了Adobe Blank字体。 AdobeBlank以零宽度开始。以下是如何使用AdobeBlank为font.onload由小林剑博士在这个有用TypeKit博客文章概述：http://blog.typekit.com/2013/03/28/introducing-adobe-blank/

1. 包含Adobe空白作为CSS文件的数据URI。

2. 在CSS规则中为包含文本的某个DOM元素指定'font-family：SomeWebFont，'Adobe Blank'（因此当使用常规字体呈现时，宽度将不为零）。一个例子是绝对定位在屏幕外的元素。

3. 检查DOM元素的宽度。如果它为零，SomeWebFont尚未加载。如果它大于零，它已经。

祝您的项目顺利！