Javascript Cufon字体替换：如何消除页面加载时出现的未样式文本闪烁？_Javascript_Fonts_Cufon_Replace_Fouc

Javascript Cufon字体替换：如何消除页面加载时出现的未样式文本闪烁？

javascript fonts replace

Javascript Cufon字体替换：如何消除页面加载时出现的未样式文本闪烁？,javascript,fonts,cufon,replace,fouc,Javascript,Fonts,Cufon,Replace,Fouc,我正在使用Cufon替换我正在处理的站点上选定标题元素的字体，但每当我加载页面时，在Cufon替换文本之前，会出现明显的未设置样式的文本闪烁。我想我可能做错了。以下是我在中看到的内容：替换（'header h1'，{fontFamily:'Monotype Corsiva'}）；替换（'header h2'，{fontFamily:'Monotype Corsiva'}）；替换（'aside h1'，{fontFamily:'Monotype Corsiva'}）； Cufon.repl

我正在使用Cufon替换我正在处理的站点上选定标题元素的字体，但每当我加载页面时，在Cufon替换文本之前，会出现明显的未设置样式的文本闪烁。我想我可能做错了。以下是我在

中看到的内容：


替换（'header h1'，{fontFamily:'Monotype Corsiva'}）；
替换（'header h2'，{fontFamily:'Monotype Corsiva'}）；
替换（'aside h1'，{fontFamily:'Monotype Corsiva'}）；
Cufon.replace（“#site info h1”，{fontfamine:'Monotype Corsiva'}）；
Cufon.replace（'abbr[title=“My缩写”]”，{fontFamily:'PalatinoBoldum'}）；

以下是我在文件末尾的内容：

<script>
// !Cufon: replace the fonts
// --------------------------------------------
Cufon.now();
// !Track & analyze stats
// --------------------------------------------
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
// Google analytics stuff...
</script> <!-- EO Tracking -->
</body>
</html>


// !Cufon：替换字体
// --------------------------------------------
Cufon.now（）；
// !跟踪和分析统计数据
// --------------------------------------------
var gaJsHost=（（“https:==document.location.protocol）？”https://ssl." : "http://www.");
//谷歌分析的东西。。。

我做错了什么？提前谢谢

浏览器呈现整个页面（使用样式表中指定的标准文本呈现），然后Cufon脚本返回并替换它。由于浏览器呈现页面的方式，以及脚本在页面的domload事件后触发的事实，没有好的方法可以避免未替换文本的瞬间闪烁

我说没有“好”的方法。。。有一些不好的方法可以做到这一点，比如在主样式表中隐藏将被CSS替换的文本，但这对可访问性和/或关闭脚本/flash的人来说是非常糟糕的

目前，这个问题是任何基于脚本/flash的文本替换技术的已知限制之一

编辑：

24路博客上有一篇文章介绍了如何使用带有CSS3@font-face声明的数据URI，以避免“未样式文本的闪现”。基本上，您可以将字体数据直接嵌入样式表中

虽然它并不漂亮，但它确实意味着字体已经加载了CSS，可以立即使用@目前Safari和Firefox都支持字体，Chrome4也将支持字体。IE支持仅限于Microsoft的EOT格式，因此我将其视为“不受支持”

请查看：

出于上述原因，不建议使用CSS可见性隐藏标题。IE8在隐藏cufon文本时呈现cufon文本时也有问题

另一种方法是，在呈现标题文本时，使用较大的负“文本缩进”值将标题文本移到屏幕左侧

您需要在标题中使用标准CSS将标题移出屏幕，或者如果您担心对未启用JS的人隐藏文本，可以使用jquery设置CSS

例如.#id{文本缩进：-999px；}'

然后将cufon替换代码放在一组脚本标记中的end body标记之前

添加对Cufon.now（）的调用

使用jquery.css（）方法，通过将文本缩进设置为0，将标题重新显示在视图中

例如：$（'#id'）.css（'text-indent'，'0'）

编辑：

似乎必须使用CSS（而不是jquery）设置初始负缩进，因为在调用jquery代码之前需要完全加载页面

通过CSS设置缩进的危险在于，关闭JS的用户根本看不到标题

如果我找到一个合理的解决方案，我会在这里发布。

你可以使用js插入一个样式规则，在正文加载之前隐藏cufon的文本

<html>
  <head> ... </head>
  <body>
    <script> // put this at the beginning of the body

      (function(){
        var i = document.styleSheets.length,
            s = document.createElement('style');
        document.head.appendChild(s);
        document.styleSheets[i].addRule(
          'h1,h2,h3,h4,h5,h6',
          'text-indent:-9999px'
        );
      }());

    </script>

    ...

  </body>
</html>


... 
//把这个放在身体的开头
（功能（）{
var i=document.styleSheets.length，
s=document.createElement（'style'）；
文件。标题。附录子项；
document.styleSheets[i].addRule(
‘h1、h2、h3、h4、h5、h6’，
'文本缩进：-9999px'
);
}());
...

我想我应该为下一个寻找这个问题答案的人添加这个因为它似乎已经完全解决了我的问题

.cufon-loading { visibility: hidden; }

上述CSS将隐藏cufon在加载cufon之前正在替换的纯文本。

>目前，此问题是任何基于脚本/flash的文本替换技术的已知限制之一。谢谢你，加布里埃尔！我想可能是这样的，但我感谢你的确认。

.cufon-loading { visibility: hidden; }