使用 IE 10 在画布中自定义字体答案

【问题标题】：Custom font in canvas with IE 10使用 IE 10 在画布中自定义字体
【发布时间】：2013-11-25 01:36:39
【问题描述】：

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

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

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

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

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

【问题讨论】：

【解决方案1】：

查看 Thomas Bachem 对上一个 SO 问题的回答（这不是公认的答案）。

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

您还可以查看这个由 Google 和 Typekit 共同创建的网络字体加载器。如果需要，此插件可让您更好地控制字体加载过程。

【讨论】：

我尝试使用 Thomas Bachem 的解决方案，但无济于事。无论我向它抛出哪个参数，函数返回都会触发事件。不过，使用 Google 和 Typekit 的插件效果很好！
我还摆弄了 JS 计时器。我最终使用了 Google/Typekit 插件，因为它看起来不那么不稳定，但是在等待 $(window).load() 之后，将创建画布元素的脚本的执行延迟 100 毫秒也很有效。很奇怪。

【解决方案2】：

使用计时器。

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

【讨论】：