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

Question

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

我的字体包含在以下head部分中：

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

我的 JavaScript 链接在我的页面底部，并添加了如下事件：

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

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

score 1 · Accepted Answer

根据 Mozilla的文档DOMContentLoaded：

注意：样式表加载块脚本执行，所以如果你有一个<script>after a <link rel="stylesheet" ...>，页面将不会完成解析 - 并且DOMContentLoaded不会触发 - 直到加载样式表。

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

score 0 · Accepted Answer

不，不是的！

在 Chrome 和 Firefox 中测试。这是一件愚蠢的事情，因为自定义字体可能会改变布局的尺寸，所以你必须应用一些技巧......让它像素完美。

用现代浏览器绕过这个（带有大小/位置检测的初始化缺陷，如 getBoundingClientRect() 等）的最简单方法是：

window.addEventListener('load', /* do things here */)

..或者，另一种说法是，例如：

<link rel="preload" href="fonts/Oxygen.woff2" as="font">

头部内部（称为浏览器预加载提示）。

2 回答 2