延迟加载我的网络字体

Question

在我的网站上，我的服务器上托管了一个Webfont，几周后我意识到在Chrome中，一旦加载了页面的所有内容，加载字体所需的时间不到一秒钟。有没有一种方法可以毫无延迟地优化负载？

我通过CSS通过以下方式加载字体：

@font-face {
    font-family: 'webfont';
    src: url('/global/fonts/webfont-regular-webfont.eot');
    src: url('/global/fonts/webfont-regular-webfont.eot?#iefix') format('embedded-opentype'),
    url('/global/fonts/webfont-regular-webfont.woff2') format('woff2'),
    url('/global/fonts/webfont-regular-webfont.woff') format('woff'),
    url('/global/fonts/webfont-regular-webfont.ttf') format('truetype'),
    url('/global/fonts/webfont-regular-webfont.svg#webfontregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
}

这里是演示：

Answer 1

(function(){
  // if firefox 3.5+, hide content till load (or 3 seconds) to prevent FOUT
  var d = document, e = d.documentElement, s = d.createElement('style');
  if (e.style.MozTransform === ''){ // gecko 1.9.1 inference
    s.textContent = 'body{visibility:hidden}';
    var r = document.getElementsByTagName('script')[0];
    r.parentNode.insertBefore(s, r);
    function f(){ s.parentNode && s.parentNode.removeChild(s); }
    addEventListener('load',f,false);
    setTimeout(f,3000);
  }
})();