javascript - DOMContentLoaded 是否等待网络字体 (Firefox)？

Question

我在应用程序中使用 Google 的网络字体，我注意到 DOMContentLoaded 在下载网络字体之前似乎不会在 Firefox 中触发。我做错了什么还是这是预期的行为？

我的字体包含在 head 部分的类似内容中:

<link href="http://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">

我的 JavaScript 链接在我的页面底部，并添加了一个事件，如下所示:

document.addEventListener('DOMContentLoaded', function() {
  ...do stuff...
})

我尝试在 Chrome 上对此进行测试，但无法真正确定它发生的顺序(字体加载速度如此之快)。

Answer 1

根据 Mozilla 的 documentation在 DOMContentLoaded :

Note: Stylesheet loads block script execution, so if you have a <script> after a <link rel="stylesheet" ...>, the page will not finish parsing - and DOMContentLoaded will not fire - until the stylesheet is loaded.

因此，您似乎遇到了预期的行为 DOMContentLoaded直到您的外部网络字体完全下载后才会触发。