自定义 CSS 字体加载问题答案

【问题标题】：Custom CSS Fonts Loading Issue自定义 CSS 字体加载问题
【发布时间】：2012-08-01 16:11:17
【问题描述】：

这是一个小问题，我不知道该怎么问，但基本上我上传了一个自定义的 opentype 字体，但在网站上加载它会在加载实际字体之前留下几秒钟的空白文本。我见过几个网站通过在更改为自定义字体之前加载本地字体来解决这些问题，但我忘记了这些（罕见的）网站以了解它们是如何做到的。

我该如何解决这个问题？我是否必须使用某种形式的 javascript 来完成这项任务？

提前致谢！感谢所有答案！

【问题讨论】：

标签： css

【解决方案1】：

这是个好问题:)

阅读此http://paulirish.com/2009/fighting-the-font-face-fout/

并添加到文件脚本中 （如果你在你的 CSS 中添加了@font-face...）：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //load fonts
    (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); 
      }
    })();

});
</script>

【讨论】：

非常感谢@Jane 的回答！但是，有没有办法用本地字体替换文本，而不是在加载字体之前隐藏页面/文本？

【解决方案2】：

我阻止 fout 仅为字体规则创建 css 文件，并在链接我的主 css 文件之前使用页面标题中的链接标记

【讨论】：