4

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

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

4

4 回答 4

7

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

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

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

编辑：

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

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

看看：如何使用 Data URIs 来避免无样式文本的 Flash

于 2009-12-10T21:31:29.810 回答
6

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

.cufon-loading { visibility: hidden; }

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

于 2012-05-22T16:48:35.530 回答
1

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

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

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

    例如。'#id { 文本缩进：-9999px; }'

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

  3. 添加对 Cufon.now() 的调用；

  4. 使用 jquery .css() 方法，通过将 text-indent 设置为 0 来重新显示标题

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

编辑：

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

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

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

于 2010-01-11T20:09:29.203 回答
1

您可以使用 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>
于 2010-09-08T21:53:05.713 回答