Question

我正在使用Cufon替换我正在处理的网站上所选标题元素的字体，但每当我加载页面时，在Cufon替换文本之前会有明显的无格式文本闪烁。我希望我做错了。这是我在<head>中的内容：

<script src="/js/Monotype_Corsiva_italic_400.font.js"></script>
<script src="/js/PalatinoBoldum_700.font.js"></script>
<script>
Cufon.replace('header h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('header h2', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('aside h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('#site-info h1', { fontFamily: 'Monotype Corsiva' });
Cufon.replace('abbr[title="My Abbreviation"]', { fontFamily: 'PalatinoBoldum' });
</script>

这就是我文档末尾的内容：

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

我做错了什么？提前谢谢！

Answer 1

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

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

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

修改：

24篇博客上有一篇关于使用数据URI和CSS3 @ font-face声明的文章，以避免“Flash Of Unstyled Text”。基本上，您将字体数据直接嵌入到样式表中。

虽然它不漂亮，但它确实意味着字体加载了CSS并且可以立即使用。 Safari和Firefox目前支持@ font-face，Chrome 4将支持@ font-face（即将推出）。 IE支持仅限于Microsoft的EOT格式，因此我将其视为“不支持”。

检查出来：How to use Data URIs to avoid the Flash Of Unstyled Text

Answer 2

我想我会为下一个正在寻找这个问题答案的人添加这个因为它似乎完全解决了我的问题。

.cufon-loading { visibility: hidden; }

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

Answer 3

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

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

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

例如。 '#id {text-indent：-9999px; }“
然后将您的cufon替换代码放在最终正文标记之前，在一组脚本标记内
添加对Cufon.now（）;
使用jquery .css（）方法，通过设置0的文本缩进将标题重新置于视图中

例如。 $（'＃id'）。css（'text-indent'，'0'）;

编辑：

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

通过CSS设置缩进的危险在于，关闭了JS的人，根本不会看到标题。

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

Answer 4

您可以使用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>

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

4 个答案: