Preload @Font-Face Fonts to stop Firefox Flicker/Delay

问题

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

回答1:

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>

回答2:

@Erik,

There has been a lot of discussion regarding this issue which Paul Irish calls FOUT (flash of unstyled text). There are numerous ways to limit this by

1 Putting CSS at the very top of the page before any script tags

2 Minimizing the size of the font file

3 Browser Caching with far future expires headers

4 Gziping your css and font file (woff can't be gzipped)

Paul Irish has a great article about this: Fighting the @font-face FOUT

Steve Souders also has a great article on his High Performance Websites blog: @font-face and performance

回答3:

Here's a solution of detecting when the web-fonts have loaded without having to use timers at all

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

来源：https://stackoverflow.com/questions/3379645/preload-font-face-fonts-to-stop-firefox-flicker-delay

标签

fonts

embedded-fonts