WP笔记

cufon字体IE浏览器兼容性问题

cufon字体可以让我们在网页上使用自定义的字体,实现和图片一样的效果。cufon字体的使用可以参考文章Cufon-网页设计师必备字体效果

通常情况下,cufon只支持使用简单的标签,你不能使用一些级联选择器,例如#menu ul li等等。经过测试发现,firefox和chrome都支持这种选择方式,但IE不支持。最简单的方法就是引入一个选择器引擎来帮助我们实现这个功能,例如jQuery,这样js引用情况如下:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="cufon-yui.js" type="text/javascript"></script>

cufon的旧版本对ie9的支持不是很好,在ie9中容易出现js确实运行了,但被渲染的文字都显示不出来。解决方法如下:

在head标签里添加

<!–[if gte IE 9]>

或者

<meta content="IE=8" http-equiv="X-UA-Compatible" />

或者下载最新的cufon-yui.js,当前最新版本是1.09i,作者在最新的版本中增加了对IE9的支持。

在网上看见一段对cufon在ie9中不工作的解释,感觉很有意思。搞来给大家看看

为什么旧版本的cufon(1.09i之前)在IE9中不能正确工作呢?旧版cufon依赖于ie的传统非标准行为,这种行为在IE9中被修复了,IE9的行为和其它标准浏览器变的一样了。具体细节如下

cufon在registerEngine方法中根据用户使用的浏览器选择一个渲染引擎,代码如下

Cufon.registerEngine("vml", (function () {
    if (!document.namespaces) { //<------ browser detection
        return
    }
   // build engine...
}

1.cufon使用elem.unknownAttr = 'value'来设定一个未知属性,例如

S.stroked = "f";
S.coordsize = m;
S.coordorigin = H = (q - o) + "," + p;
S.path = (Z.d ? "m" + Z.d + "xe" : "") + "m" + H + e;
S.fillcolor = a;

与IE8不同,IE9将其视为脚本的expando properties而非content attributes,使得我们特意为IE准备的方式却不能正确工作了。如果换成标准的setAttribute方法,就能正确工作了。

 

2.cufon在设置style样式时自动忽略单位'px',比如width和height属性,IE9与其他浏览器相同需要不带单位的值。

如果修复这两点,cufon的vml引擎就能在IE9中工作了,但最好的方法是让IE9使用canvas引擎,这个引擎在IE9中工作的非常好。

这是一位自称是“John Hrvatin Program Manager, Internet Explorer”的人说的,不知道对不对。

刚刚下载使用了最新版的IE9,暂时没发现我的网站在IE9里看有什么不正常,cufon字体可以正常渲染。比较欣慰的是装了IE9感觉查看网页的速度变快了不少,微软有一个性能测试的网页,测试了一下发现IE9的硬件加速能力明显强于firefox和chrome。

测试地址http://ie.microsoft.com/testdrive/Performance/FishIETank/。我选了1000条鱼,在IE9里非常流畅,但firefox和chrome卡的我很难受。希望IE9能一改之前IE浏览器的糟糕表现,给开发人员省点时间。