DOMContentLoaded是否等待Web字体（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上进行测试，但无法确定它发生的顺序（加载的字体速度如此之快）。

Answer 1

根据Mozilla DOMContentLoaded <script>的说明：

  

注意：样式表会加载阻止脚本执行，因此如果<link rel="stylesheet" ...>之后有DOMContentLoaded，则页面将无法完成解析 - 并且DOMContentLoaded将不会触发 - 直到样式表为加载。

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

Answer 2

不，不是！

在Chrome和Firefox中进行了测试。这是很愚蠢的事情，因为自定义字体可能会更改布局的尺寸，因此您必须应用一些技巧以使其像素完美。

现代浏览器绕过此问题的最简单方法（具有大小/位置检测的初始化pitfails，例如getBoundingClientRect（）等）是

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

..或另一种放置方式，例如：

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

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