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

发布于 2024-08-13 19:15:36 字数 1099 浏览 6 评论 0原文

我正在使用 Cufon 来替换我正在处理的网站上所选标题元素的字体，但每当我加载页面时，在 Cufon 替换文本之前，都会出现明显的无样式文本闪烁。我预计我可能做错了。这是我在中的内容：

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

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

原文

I'm using Cufon to replace the font of selected heading elements on a site I'm working on, but whenever I load a page, there is a noticeable flash of unstyled text before Cufon replaces the text. I expect that I may be doing it wrong. Here's what I have in the <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>

And here's what I have at the end of my document:

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

What am I doing wrong? Thanks in advance!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

生生漫 2024-08-20 19:15:36

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

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

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

编辑：

24 种方式博客有一篇文章介绍如何使用带有 CSS3 @font-face 声明的数据 URI 来避免“Flash Of Unstyled Text”。基本上，您将字体数据直接嵌入到样式表中。

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

查看：如何使用数据 URI 避免无样式文本的 Flash

回复收藏 0 原文

爱冒险 2024-08-20 19:15:36

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

.cufon-loading { visibility: hidden; }

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

Thought i'd add this for the next person who's looking for an answer to this issue
as it appears to have completely solved the issue for me.

.cufon-loading { visibility: hidden; }

The above CSS will hide the plain-text that cufon is replacing before cufon loads.

回复收藏 0 原文

你在看孤独的风景 2024-08-20 19:15:36

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

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

您需要使用标题中的标准 CSS 将标题移出屏幕，或者如果您担心向未启用 JS 的人隐藏文本，则可以使用 jquery 设置 CSS。
例如。 '#id { 文本缩进：-9999px; }'
然后将 cufon 替换代码放在一组脚本标记内的结束正文标记之前
Add a call to Cufon.now();
使用 jquery .css() 方法，通过将文本缩进设置为 0 将标题重新显示在视图中
例如。 $('#id').css('文本缩进', '0');

编辑：

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

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

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

回复收藏 0 原文

唔猫 2024-08-20 19:15:36

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

You could use js to insert a style rule to hide the cufon'd text before the body loads...

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

回复收藏 0 原文

~没有更多了~