解决Opera和Safari下难看的中文显示问题

2010 12 2 09:25 PM 4587次查看

分类：Web 标签：CSS

昨天闲得无聊测试了下各种字体的显示效果，今天看到一篇《Mac 和 Windows 的中文字体显示效果》，才想起这玩意还和操作系统有关。

其实玩Mac和iPhone时都觉得中文很好看的，同样的字体弄到Windows下就大打折扣了。Android的字体也是这样，所以问题肯定还是Windows惹的。
而且关键是我用的还是英文版的Windows，缺省的中文字体虽然是宋体，但有的浏览器很傻（例如Opera），会把简体中文当成日文和繁体中文，而用新细明体（PMingLiu）来显示。
更扯淡的是直接设置font-family为"新细明体"或PMingLiu都正常，显示效果和宋体一样。但是当浏览器匹配失败，而使用缺省的"新细明体"时，它的表现却类似于“新細明體”；于是这些文字看上去就像异体（或繁体），而简体字独有的汉字则显示成其他字体，结果导致文字参差不齐，看上去非常糟糕。
最扯淡的是Opera这种糟糕的浏览器还不遵循font-family的规则，匹配字体时，如果英文字体写在前面且在系统里找到该字体，就会无视后面的字体，于是显示中文时就会用缺省的新细明体了。

要解决Opera这个问题，最简单的方法就是在最前面写上中文字体。不过缺点也很明显，大多数的中文字体的英文看上去很一般，为了这1％份额的Opera去影响99％的用户不值得。
其次就是专门为Opera设计一个CSS样式，用CSS hack或JavaScript载入即可，缺点就是太麻烦了。
而我是那种很能说服自己的人，既然用户喜欢选择蹩脚的浏览器，那就让他们自己去应付这些蹩脚的问题。IE可以被骂，Opera为什么不该被骂？

当然我也知道，Opera的忠实用户应该会自己去设定字体的，只不过这个设置非常狗血，我就稍微介绍下吧。
我用的是Opera 10.63，描述有差异的自己找找相似的吧。
在首选项—高级—字体里可以看到一堆玩意，其中“网页普通文字”可以改成“宋体”等中文字体。
不过这还没完，只设置这个完全一点屁用都没有。看下面的“国际字体…”，然后把“CJK符号和标点”、“日语…”、“简体中文”和“繁体中文”等都改了，这才算大功告成。
所以说Opera这玩意设计得很糟糕，改个中文字体要改7个地方，还不能批量设置，用它的人纯属蛋疼。

至于Safari，其实它还算好，至少你在CSS里写的中文字体它不会无视；但是有的网站并不写中文字体，于是Windows下就用新细明体来显示了（Mac下应该是华文黑体或华文细黑）。
想看效果的可以用Safari 5去围观腾讯微博，这个网站采用的是“font-family: Tahoma, Arial;”。
顺便截图比较一下同为webkit内核的2款浏览器（特别注意“刘翔”的“刘”）：
Safari 5：

Chrome 7：


要解决这个杯具问题，改字体貌似是无效的。
我的方法是把Preferences（设置）—Appearance（外观）—FontSmoothing（字体平滑）设置为Light（柔光），这样看上去就马马虎虎了。
不过仍然存在颜色深浅不一的情况，不知道删掉新细明体能否解决这个问题…

此外还有个手机显示的问题。实际上最简单的方法就是不写中文字体，iPhone和Android下的效果都不错。不过考虑到我还得在Windows上测试，所以还得加个"华文黑体"。
至于Opera mini，我只能继续放任它去杯具了～

2010年12月7日更新：突然发现这个问题可以通过标明网页的语言来解决。

具体来说，HTML可以写成：
<html lang="zh-CN">
XHTML可以写成：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN">

检测到简体中文后，Opera就会自动使用宋体，而不是细明体了。当然你也可以写zh-TW来强制使用细明体。

不过这招对Safari无效，想搞定它还得写上个中文字体。

0条评论 你不来一发么↓

    想说点什么呢？