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仅为font-face规则创建一个css文件，并在链接我的主css文件之前使用页面标题中的链接标记

自定义CSS字体加载问题

2 个答案: