我在画布上制作使用来自网络服务的字体的东西，结果是当首次加载画布时，我从谷歌字体加载的字体尚未到达然而，对于最简短的时刻，画布中只有普通字体，然后切换到我下载的字体。
这是一个小细节，但非常烦人。我想知道是否有任何方法可以预先加载字体，即直到我确定我已经有字体之后才执行画布相关的javascript代码。
字体放在html的标题中：
<link href='https://fonts.googleapis.com/css?family=Stalinist+One' rel='stylesheet' type='text/css'>
和文件底部的js链接，就在正文关闭之前。
答案 0 :(得分：1)
使用Google的WebFontLoader脚本
https://github.com/typekit/webfontloader
WebFontLoader的fontactive回调相当于img元素的onload。
WebFontLoader完全正确，WebFontLoader由Adobe自己维护（TypeKit！） - 所以这个CDN链接不太可能消失。
虽然我推荐使用WebFontLoader，但您可以通过检测元素宽度何时发生变化（更改宽度==字体已加载）来自行破解font.onload。
Adobe已创建Adobe Blank字体，以便在加载字体时进行测试。 AdobeBlank以零宽度开始。以下是Ken Lunde博士在这篇有用的TypeKit博客文章中使用AdobeBlank作为font.onload的方法：http://blog.typekit.com/2013/03/28/introducing-adobe-blank/
在CSS文件中包含Adobe Blank作为数据URI。
在CSS规则中为包含文本的某些DOM元素指定'font-family：SomeWebFont，“Adobe Blank”（因此在使用常规字体呈现时将具有非零宽度）。一个例子是绝对位于屏幕外的元素。
检查DOM元素的宽度。如果它为零，SomeWebFont尚未加载。如果它大于零，则它有。
祝你的项目好运！