我正在 Canvas 上制作一些使用来自网络服务的字体的东西，发生的情况是，当 Canvas 首次加载时，我从谷歌字体加载的字体尚未到达，所以最短的时间有时 Canvas 中只有普通字体，然后它会切换到我下载的字体。
这是一个小细节，但非常烦人。我想知道是否有任何方法可以预加载字体，即在我确定我已经拥有字体之前不执行与 Canvas 相关的 JavaScript 代码。
字体放置在html的标题中:
<link href='https://fonts.googleapis.com/css?family=Stalinist+One' rel='stylesheet' type='text/css'>
以及文件底部的 js 链接，就在正文关闭之前。
最佳答案
使用 Google 的 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，如 Ken Lunde 博士在这篇有用的 TypeKit 博客文章中所述:http://blog.typekit.com/2013/03/28/introducing-adobe-blank/
在 CSS 文件中包含 Adobe Blank 作为数据 URI。
在 CSS 规则中为某些包含文本的 DOM 元素指定“font-family: SomeWebFont, “Adobe Blank”(因此在使用常规字体呈现时将具有非零宽度)。一个例子是绝对位于屏幕外的元素。
检查 DOM 元素的宽度。如果为零，则 SomeWebFont 尚未加载。如果它大于零，那就是。
祝您的项目顺利!
关于javascript - 延迟执行 Canvas JavaScript，直到加载字体，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27079760/