Joh*_*ens 4 javascript fonts replace cufon fouc
我正在使用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篇博客上有一篇关于使用数据URI和CSS3 @ font-face声明的文章,以避免"Flash Of Unstyled Text".基本上,您将字体数据直接嵌入到样式表中.
虽然它不漂亮,但它确实意味着字体加载了CSS并且可以立即使用.Safari和Firefox目前支持@ font-face,Chrome 4将支持@ font-face(即将推出).IE支持仅限于Microsoft的EOT格式,因此我将其视为"不支持".
我想我会为下一个正在寻找这个问题答案的人添加这个,因为它似乎完全解决了我的问题.
.cufon-loading { visibility: hidden; }
上面的CSS将隐藏cufon在cufon加载之前替换的纯文本.
| 归档时间： |
|
| 查看次数： |
6234 次 |
| 最近记录： |