Flash of Unstyled Content 问题答案

【问题标题】：Flash of Unstyled Content problemsFlash of Unstyled Content 问题
【发布时间】：2012-10-16 13:34:41
【问题描述】：

我正在使用 Head.js、Google Web Fonts，并从网络上的其他地方提取一些内容（占位符图像）。

我注意到，在页面加载时，我看到未设置样式的内容，然后我的标题字体正确加载，但重量不正确，然后加载了正确的重量。

知道是什么导致我的标题文本出现这种奇怪的行为吗？它不应该只是从无样式变为正确请求的字体吗？

还有什么是阻止对禁用 javascript 的人友好的 FOUC 的最佳方法？

谢谢！

更多细节：

我正在使用 Google 提供的 Javascript 方法来插入我使用的 3 种字体。我可以清楚地看到它正在加载 'Istok+Web:700:lating' ，这意味着应该只提供 700 的重量。

由于这种方法，我根本不使用@font-face。简单的 font-family 就好像它是一个常规的东西。

虽然我使用的是 LESS.js，但从网络分析器来看，它似乎并没有导致任何严重的减速。

【问题讨论】：

标签： javascript html google-webfonts head.js fouc

【解决方案1】：

这仅仅是因为浏览器在下载所有内容之前就已经显示了该网站。你有一个用于所有字体粗细的@font-face css 规则，还是有一个单独的用于正常/粗体字体粗细的规则？另请注意，虽然从 Google CDN 加载字体很方便，但这并不是最快的方式（因为必须建立新的 http 连接）。 //编辑当你使用快速使用按钮时，谷歌总是为不同的权重设置不同的字体文件......

使用 head.js 时无法防止出现未设置样式的内容，因为所有内容都是并行加载的，而浏览器往往会尽快显示所有内容。只是祈祷每个人都有一个快速的连接。你为什么要介意呢？在加载过程中，您总是会看到某种半页...

【讨论】：

FOUC 似乎可以通过使用 visibility:hidden 来防止（理论上），然后在 head.ready 上将可见性设置为可见。我对这个解决方案的问题是 A) 我自己似乎无法让它工作，并且 B) 禁用 javascript 的人什么也看不到。
但是禁用 javascript 的人无论如何都看不到任何东西，因为您使用 javascript 加载资产...因此，如果您希望您的网站具有样式和 javascript 效果是可见的，请不要使用 head。 js...
他们将看到无样式的文本。这很好。但是如果我要实现可见性：隐藏，他们会看到 no 文本。