预加载@字体脸字体停止Firefox闪烁/延迟

Question

我一直在阅读关于此的帖子，仍然无法找到答案。有没有人想出了如何预加载字体来停止闪烁/延迟？

干杯。 埃里克

Answer 1

在Firefox搏击FOUT： Firefox启动重 - 渲染文本之后window.load事件。 因此，我所做的就是隐藏像Paul Irish这样的内容，但是在window.load之后，我仍然等待200毫秒（为真实渲染提供FF时间），然后显示页面。

我的网站有很多图片，所以为了加快速度，我首先发送页面没有内容，然后用ajax调用获取内容。 这是很多工作来满足FF，但结果是好的。

这是我保罗爱尔兰的变种，请注意我用的知名度代替负文本缩进，以服务游客至少布局速度快：

<script> 
    (function(){ 
    var d = document, e = d.documentElement, s = d.createElement('style'); 
    if (e.style.MozTransform === ''){ // gecko 1.9.1 inference 
    // s.textContent = 'body{visibility:hidden}'; 
    s.textContent = 'body{text-indent:-9999px}'; 
    e.firstChild.appendChild(s); 
    function f() 
    { 
    var ffrendertime = setTimeout (function(){s.parentNode && s.parentNode.removeChild(s)} , 200); 
    } 
    addEventListener('load',f,false); 
    setTimeout(f,2000); 
    } 
})(); 
    </script> 

Answer 2

@Erik，

已经有关于这个问题，其中保罗爱尔兰呼吁FOUT（无样式的文本的闪光）的讨论很多。有许多方法由

1的任何脚本之前，在页面的最顶端把CSS来限制这种标签

2最小化的字体文件

3浏览器缓存与遥远的未来的规模Expires头

4 Gziping你的CSS和字体文件（WOFF不能用gzip压缩）

保罗爱尔兰大约有一个很好的文章：Fighting the @font-face FOUT

史蒂夫Souders的也有他的高性能网站博客一个伟大的文章：@font-face and performance

Answer 3

下面是当网页字体有检测解决方案而完全不必

http://smnh.me/web-font-loading-detection-without-timers/