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

【问题标题】：Cufon font replacement: How can I eliminate the flash of unstyled text that occurs when the page loads?Cufon 字体替换：如何消除页面加载时出现的无样式文本闪烁？
【发布时间】：2010-12-25 10:39:07
【问题描述】：

我正在使用 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>

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

【问题讨论】：

标签： javascript fonts cufon replace fouc

【解决方案1】：

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

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

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

编辑：

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

虽然它并不漂亮，但它确实意味着该字体已加载 CSS 并可以立即使用。 @font-face 目前由 Safari 和 Firefox 支持，并将在 Chrome 4 中得到支持（即将接近）。 IE支持仅限于微软的EOT格式，所以我算作“不支持”。

查看：How to use Data URIs to avoid the Flash Of Unstyled Text

【讨论】：

> 目前，此问题是任何基于脚本/闪存的文本替换技术的已知限制之一。谢谢，加布里埃尔！我认为可能是这种情况，但我感谢您的确认。

【解决方案2】：

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

.cufon-loading { visibility: hidden; }

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

【讨论】：

【解决方案3】：

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

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

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

例如。 '#id { 文本缩进：-9999px; }'
然后将您的 cufon 替换代码放在 end body 标记之前，在一组脚本标记中
添加对 Cufon.now() 的调用；
使用 jquery .css() 方法，通过将文本缩进设置为 0 来重新显示标题

例如。 $('#id').css('text-indent', '0');

编辑：

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

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

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

【讨论】：

【解决方案4】：

您可以使用 js 插入样式规则以在正文加载之前隐藏 cufon'd 文本...

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

【讨论】：