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上测试这个，但不能真正确定它发生的顺序(字体加载如此之快)。

Answer 1

根据Mozilla关于DOMContentLoaded的文档:

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

因此，似乎你正在经历预期的行为，这样的DOMContentLoaded不会被触发，直到你的外部网页字体完全下载。

Answer 2

不，没有!

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

在现代浏览器中绕过这个(初始化失败的大小/位置检测，如getBoundingClientRect()等)的最简单方法是:

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

. .或者，另一种方式是，例如:

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