闪烁的无格式内容问题

时间:2012-10-26 09:31:59

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

我正在使用Head.js,Google网络字体,并从网络上的其他位置提取一些内容(占位符图片)。

我注意到,在页面加载时我看到没有样式的内容,然后我的标题字体正确加载,但没有适当的重量,然后适当的重量加载。

知道我的标题文字导致这种奇怪行为的原因是什么?它应该不是从没有样式到正确的请求字体吗?

对于禁用javascript的人来说,停止对FOUC友好的最佳方法是什么?

谢谢!

更多细节:

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

由于这种方法,我根本不使用@ font-face。简单地说font-family就好像它是一般的东西。

虽然我正在使用LESS.js,但是从网络分析仪来看它似乎没有造成任何重大减速。

1 个答案:

答案 0 :(得分:0)

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

使用head.js时无法阻止无格式内容的闪现,因为所有内容都是并行加载的,而浏览器往往会尽快显示所有内容。只是祈祷每个人都有快速联系。你为什么要介意?在加载过程中,你总能看到某种半页...