Question

当我跑步时

<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>

<head>

中的

是否在下载字体时阻止了页面？

这是一张图片，但我没有提到字体或我的图标。

Answer 1

Google＆amp; Typekit提供了一个JS库来异步加载字体： https://developers.google.com/fonts/docs/webfont_loader

请注意，异步加载字体CSS会导致FOUT（无样式文本的Flash），这是一种瞬间延迟，在加载样式字体之前，类型以其基本字体显示。

如果你使用这个库，它应该给任何等待样式的文本提供一个＆＃34; wf-loading＆＃34;然后你可以通过基本的CSS处理。例如，您可以.wf-loading {display: none}执行任何等待设置样式的文本，直到它被设置为样式才会显示。

Answer 2

您不会在开发工具的xhr标签中看到字体。点击font标签。或者更好的是，点击font然后按住Ctrl +点击css标签即可查看两者。您也不会在网络标签和custom_cell_tutorial中看到favicon。

字体文件加载异步（不呈现阻止）。因此，将@font-face直接放在<head />中并不一定会阻止FOUT。当这些字体文件的HTTP请求（例如woff2，ttf等）正在运行异步时，DOM将继续呈现。

CSS是渲染阻止，通常网站上的css文件下载和解析需要更长的时间，因此在完成CSS绘制之前，您的字体文件可用。如果您尝试加载没有任何CSS的网站，您可能会看到此FOUT。