css - 自定义 CSS 字体加载问题

Question

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

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

提前致谢！所有答案表示赞赏！

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

Answer 2

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