使用 IE 10 的画布中的自定义字体

Custom font in canvas with IE 10

本文关键字：自定义 字体 布中 使用 IE      更新时间：2023-09-26

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

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

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

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

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

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

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

使用 jQuery 知道何时加载@font字体？

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

https://github.com/typekit/webfontloader#events

使用计时器。

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

https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded/30369915#30369915

相关文章：