@fontface 页面刷新后无法正确加载

Question

我有一个页面，它使用通过@font-face 加载的字体将字符串绘制到画布上。

为了等待字体加载，我使用了： https://stackoverflow.com/a/11688948/746269

在 Firefox 中运行良好， 并在第一次打开页面时在 chrome/opera 中工作 但是一旦我刷新页面，并尝试运行相同的代码 它最终以默认的“未加载字体”字体绘制 直到我第二次运行代码。

除非我打开一个新窗口或右键单击刷新并选择“清空缓存和硬重新加载”， 它总是第一次失败。

我认为刷新之间可能存在一些变量， 但是，尽管所有值都正确，但当我单步执行时，它会绘制默认字体。

我不能只告诉客户不要刷新页面，我根本看不到解决方案。 任何帮助将不胜感激:)

Answer 1

我通过将它添加到 html 中来解决它 发现 webkit 加载字体与 firefox 和 IE 不同，在 html 中第一次使用时加载它们。

<div style="font-family: MyFontName; visibility: hidden; height: 0px; width:0px;">a</div>

Answer 2

我遇到了同样的问题，我只是通过在我的页面中引用 ModernizerJS 脚本来解决它。