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

StackOverflow https://stackoverflow.com/questions/1884145

题

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

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

有帮助吗？

解决方案

在浏览器呈现整个页面（使用样式表中指定的标准文本渲染），那么的Cufón脚本返回并替换它。由于浏览器渲染页面的方式，该脚本火灾页的DOMLoaded事件发生后，有避免未置换文本的瞬间闪光没有什么好办法的事实。

我说没有“好”的方式......也有不好的方式去做，就像躲在那将与你的主样式表CSS替换的文本，但是这是非常糟糕的方便性和/或谁拥有脚本的人/闪光关闭。

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

修改：

24分博客的方式对使用数据URI与CSS3的@ font-face声明，以避免“闪光无样式的文本”的文章。基本上，可以直接嵌入字体数据到样式表。

虽然不漂亮，但它确实意味着字体加载了CSS，并准备立即使用。 @字体面目前由Safari和Firefox支撑，并且将在铬4（这是越来越接近）来支持。 IE浏览器的支持仅限于微软的EOT格式，所以我就当是“不支持”。

检查出来：如何使用数据URI避闪无样式文本

其他提示

以为我想补充这对于谁是寻找一个解决这个问题的下一个人 因为它似乎已经完全解决了这个问题对我来说。

.cufon-loading { visibility: hidden; }

上面的CSS将隐藏纯文本的Cufón的Cufón加载之前被更换。

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

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

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

    例如。'#id { 文本缩进：-9999像素；}'

  2. 然后将 cufon 替换代码放在结束正文标记之前的一组脚本标记内

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

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

    例如。$('#id').css('文本缩进', '0');

编辑：

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

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

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

您可以用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>
不隶属于 StackOverflow
scroll top