Question

我在画布中使用自定义字体（在CSS文件中使用@ font-face调用）。由于字体文件需要在可以在画布中使用之前加载，因此我在窗口加载后运行脚本，如下所示：

$(window).load(function() {
  /* Generate canvas code */
});

在IE10中，似乎在加载字体文件之前执行代码。使用默认字体（在本例中为Times）而不是自定义字体。此行为仅在IE10中发生。与其他主流浏览器一样，以前版本的IE支持画布使用正确的字体。

自定义字体在网站的其他位置使用，位于画布元素之外。即使在IE10中，这些文本也能正确呈现，这意味着正确加载了字体文件，但脚本在此之前执行。

在画布中使用自定义字体的正确代码是什么？或者在运行脚本之前如何能够等待加载字体文件？是否有可以绑定它的事件？

Answer 1

查看Thomas Bachem关于此前SO问题的答案（这不是公认的答案）。

他使用计时器来测试是否已设置字体宽度。如果是，则加载您的字体。

您还可以查看Google和Google联合创建的此网络字体加载程序。 Typekit。如果您需要，此插件可以更好地控制字体加载过程。

Answer 2

使用计时器。

setTimeout(function(){alert(IsLoadedFonts('font1','font2','font3'));},100);