Question

以下网页加载字体真棒，显示图标fa-check，debugger上有window.onload个断点：

<!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 bug。

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

Answer 1

遗憾的是，弄清楚字体何时加载到页面上是一个非常棘手的问题，尤其是当您必须支持多个浏览器/设备时。上次我参加一项调查时，没有任何灵丹妙药，但很多人都写了他们的方法。请参阅here和here以及here。

Answer 2

您可以使用document.fonts.ready检查字体加载状态，并使用then(...)返回可以解决的承诺：

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

它被认为是“实验性”，请在此处查看受支持的浏览器：
https://developer.mozilla.org/en-US/docs/Web/API/Document/fonts

window.onload在font-face加载之前触发

2 个答案: