预加载@字体脸字体停止Firefox闪烁/延迟 [英] Preload @Font-Face Fonts to stop Firefox Flicker/Delay

问题描述

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

干杯。
Erik

解决方案

Firefox在Firefox中打败FOUT：
Firefox开始重新渲染AFTER窗口的文本。加载事件。
所以我所做的就是隐藏像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）; 
函数f（）
 {
 var ffrendertime = setTimeout（function（）{s.parentNode&& s.parentNode.removeChild （s）}，200）; 
} 
 addEventListener（'load'，f，false）; 
 setTimeout（f，2000）; 
} 
}） （）; 
< / script> 
  

I've been reading the posts about this, and still can't find the answer. Has anyone figured out how to preload the fonts to stop the flicker/delay?

Cheers. Erik

解决方案

Fighting the FOUT in Firefox : Firefox starts re - rendering the text AFTER window.load event. So what I did is hide the content like Paul Irish does, but AFTER window.load I still wait 200 millisec (to give FF time for the real rendering), and then show the page.

My site has a lot of images, so to speed this up, I first send the page allmost without content, and then get the content with an ajax call. That's a lot of work to satisfie FF, but the results are good.

This is my paul irish variant, note I use negative text-indent in stead of visibility to serve the visitor at least the layout faster:

    <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>

这篇关于预加载@字体脸字体停止Firefox闪烁/延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！