gpt4 book ai didi

javascript - Cufon 字体替换 : How can I eliminate the flash of unstyled text that occurs when the page loads?

转载 作者:搜寻专家 更新时间:2023-11-01 04:49:38 24 4
gpt4 key购买 nike

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

我做错了什么?提前致谢!

最佳答案

浏览器呈现整个页面(使用样式表中指定的标准文本呈现),然后 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

关于javascript - Cufon 字体替换 : How can I eliminate the flash of unstyled text that occurs when the page loads?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1884145/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com