window.onload 在字体加载前触发

Question

以下网页加载 Font Awesome，显示图标 fa-check，并在 window.onload 上有一个 debugger 断点：

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

    <script>
      window.onload = function () {
        debugger;
      };
    </script>
  </head>

  <body>
    <div class='fa fa-check fa-4x'></div>
  </body>
</html>

在 Chrome 上（控制台打开），在呈现图标后命中断点。这是预期的行为。

在 Safari 上（控制台打开），在呈现图标之前断点。我假设这是一个 Safari 错误。

如何保证 window.onload 在 Safari 上呈现图标后触发？

Answer 1

不幸的是，弄清楚字体何时加载到页面上是一个非常困难的问题，尤其是当您必须支持多个 browsers/devices 时。上次我进行调查时没有灵丹妙药，但很多人已经写下了他们的方法。参见 here and here and here。

Answer 2

您可以使用 document.fonts.ready 检查字体加载状态，其中 returns 您可以使用 then(...):

解决承诺

document.fonts.ready.then(function() {
  // Any operation that needs to be done only after all the fonts
  // have finished loading can go here.
});

被认为是 'experimental'，请在此处查看支持的浏览器：
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

window.onload 在字体加载前触发

window.onload triggered before font-face load

html

javascript

css

safari

font-face