javascript - 使用 IE 10 在画布中自定义字体

Question

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

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

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

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

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

score 0 · Accepted Answer

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

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

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

score 0 · Accepted Answer

使用计时器。

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

2 回答 2