本来写了个全无图的效果,不过似乎只能针对XP下有对应的黑体和微软雅黑才行。在WIN7电脑测试本来这个双引号不需要用到背景图,可是回来准备严格测试的时候发现问题了,在虚拟机上的一个纯净的精简XP上,这个双引号就算用黑体也是大大的两个像圆形的逗号,最终测试无效,只好用背景图实现了。 说到这个效果,唯独WIN7以上的系统,IE8以上版本才能很好不需要图片展示出来,为了兼容IE6和IE7,经过数小时测试,只好采用背景图。 字体在IE6/IE7/IE8/Chrome下的测试效果如下图: 为了自适应而做的一个大双引号文字段自适应DEMO,其实感觉这个后来改的版本并不好,用了大量hack以及IE条件判断,写出来也只是研究一下,希望以后能想到更好的方法。 看着很不爽的一个DEMO,当然这里还有另外一个相对简单多了的DEMO,不过建议在WIN7下的IETESTER测试,似乎虚拟机版本XP是不行的。 在原版的XP系统下,IE6和IE7对于字体支持似乎不是特别的好。上次提到过中文字体似乎对于中文标点都不能正常显示出来,更不要提英文字符对汉字的支持了。正是这个原因上期的背景图解决IE6和IE7字符替换问题费了很大的功夫,这次简要总结一下所发现的XP下IE6和IE7下字体的一些问题。 其实之前做网站从未遇到这样的问题,可能是很久以前微软雅黑并未普及吧。就目前来看,网上关于字体的资料太少,国外有却跟汉字毫无关系,以此下了一个可能并不准确的结论: XP系统下(无微软雅黑等特别的字体)的IE6和IE7是不支持英文字体下的汉字标点符号,甚至连汉字的不同字体下的标点符号都没有区别,统一是两个大逗号的样子,唯独IE8对这些字体略有区别,有所改进(例如IE6和IE8下Arial的中文双引号就不一样),那么估计IE6和IE7想用特别的标点符号样式的话还是放弃吧! 对于上面做的两个DEMO,后来思前想后觉得实在不妥,于是做了一个终极方案,暂时恐怕也再想不出来更好的办法了。这个方案的代码量比较少,hack内容也不多,因为字体是从google font内调用出来的,而找到这样的字体也是花了时间一个个测试的,这样的成本太高。 希望以后能对字体有更深入的研究,把这些问题说清楚。 via:Whidy Blog |