烈之斩 发表于 2011-10-13 19:07

四个主流浏览器对于中日混杂文本显示的对比

此贴已经过时，关于最新的研究 请参见：http://bbs.saraba1st.com/2b/read.php?tid=738413
——————
刚才john老爷突然提起这件事了确实令我比较意外，因为我经常像别人抱怨这个问题却从来没人在乎

IE那种中日混杂的显示模式是我一直无法抛弃IE的一大理由，而且这点firefox确实做的一般。看上去好像只有fx这么弱，别的都和ie一样好就不太对了，因为其实主流的四个浏览器对于这个的处理都是不一样的。

总而言之，我们的问题基于这样的一种情况：
如果一个网页：
1）没有指定语言(HTML里的"lang=xxx")
2）没有指定字体
3）为Unicode系列编码（之所以增加这个条件，是因为对于Opera/IE/Fx来说，如果某网页是ANSI编码，那么自动将其字符集视为其语言；但是这条对Chrome无效，因为Chrome浏览器渲染网页根本就没有语言的概念，下详述）
4）夹杂了中日文字，准确地说，汉字和假名
在浏览器里其字体将会如何显示。

这个问题在以下两种情况会遇到：
1.一个未指定字体未指定语言的UTF-8的中文网页 中间有人贴了一小段日文 —— it's not a bid deal.
2.一个实际上的日文网页，但是网页维护员偷懒没写lang=ja，也没指定字体（因为对于日本用户 这俩都是默认的）
——这是个大问题。firefox显示日文丑，主要就体现在这上面了（当然没经过改字体的chrome也一样，下详）。比如用google.com搜一个日文关键词：
http://i733.photobucket.com/albums/ww334/ikenaikoto/4bowser.png
（firefox（字体改成雅黑了，改成Arial也无法拯救，下详），opera，chrome（字体改为Arial），ie）


另外，介于测试条件有限，以上测试均在中文WIN7操作系统下进行。不同语言版本系统可能会对结果造成影响，但XP应该也会有同样的结果就是了。

测试方法也很简单，使用记事本新建一个txt，输入测试内容，然后保存成UTF-8格式后缀为html，用各个浏览器打开就行了。当然有些条件还需要补充，后面再说。

我测试的文本是
你好将将将こなんここと
包含汉字和假名，和一个特殊的汉字“将”一会儿会说明。

首先是IE9：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/IE9.png
对字体熟悉的人一眼就可以看出，其中汉字部分全是宋体（其实是新宋体），而假名部分是MS PGothic，日文的系统默认字体。这种显示效果很好，因为众所周知宋体的假名是相当惨不忍睹的，后面可以看到。

然后是Firefox8：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Fx8.png
因为我在Firefox里设置的字体为微软雅黑，所以所有字符全部显示为微软雅黑。如果按照默认是宋体，那么也全都是宋体，比如这个英文版9.0里的：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Nightly.png
请注意。这里采用的字体设定是firefox选项-内容-字体&颜色-高级-简体中文-无衬线字体的设定（在通常情况下的简体中文版firefox，这个设定等同于firefox选项-内容-字体&颜色部分显示在外面的那个字体）。即使你把这个字体改成一个不包含汉字/假名字符的字体（比如Arial），那么汉字假名还是会全部显示成宋体，这点和你的系统语言有关，和firefox的语言版本无关。之所以提这点是为了和后面的Chrome对比。

接下来，Opera：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Opera1_jpg.png
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Opera2.png
这里之所以截图两张，是因为Opera是有一个判断的。如果文字中假名占得多，那么将整体视为日文（图1，字体为ms pgothic），如果汉字多那么视为中文（图2 字体为宋体）。在第一张图里，可以很明显看到“你”字扭曲了，这是典型的日文字体显示简体中文字符的现象；另外请对比将字，这个字有意思在他虽然只占据一个Unicode字符位，但是它在中日字体中字形显著不同。另外请注意，虽然Opera有这样的一个智能判断环节，但是同时只能显示为一种字体，和IE那个假名/汉字分别用不同字体显示并不相同。这点很奇怪，因为实际显示测试中（见上面那个google网页）并不是这样的…所以我也很迷茫 可能测试还不够完善吧-_,

OK，最后Chrome登场：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Chrome.png
有人会说了，咦，这不是和IE效果一样好么！看上去是这样没错的，不过两者实现有不同。因为Chrome根本不区分网页的语言，所以对于所有未指定字体的字符，全部都套用他那套唯一的字体设定。如果你在其中设定成宋体（对于简体版，这是默认设置），那么显示效果就将是
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Chrome2.png
这样和firefox默认一样了。但是如果你将Font设置成不含汉字/假名的ASCII字体比如Arial、Times New Roman之类，那么对于这类字体不包含的字符，他就会调用其他系统字体来显示，对于汉字是宋体，假名是MS Pgothic，也就是和IE一样的。

但是这样有一个缺陷。所有浏览器都会识别html/css中指定的字体（废话），但是对于没指定字体、只指定语言的（其实这是一种很好的设定，把选择权留给了用户），会自动检索浏览器设定的语言字体。
对于IE，这个选项在Internet选项-字体：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/IE-font-setting.png
对于firefox，在选项-内容-字体&颜色-高级
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Fx8-font-setting.png
对于Opera，在首选项-高级-字体-国际字体（日文还区分平假名片假名汉字，相当高级！）：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Opera-font-setting.png
而我们的Chrome呢，表示他不关心东亚用户追求简约所以这个选项欠奉啦！

那么这将导致什么后果？后果就是如果你上了一个明明已经指明为语言日语的网站——比如日文维基百科，那么你将忍受这种宋体字效果：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/chrome-wikipedia-1.png
如果你恰好用的英文版Chrome或者很聪明地改字体为英文字体，效果将变成：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/Chrome-arial-1.png
你可能会说，这不是很好嘛！等等，让我们对比一下这个页面：
http://i733.photobucket.com/albums/ww334/ikenaikoto/Browser/4-jiang-1.png
看出区别了吧。由于Chrome并不支持网页语言，他只是简单地把假名变成MS Pgothic字体而已，而汉字部分还是宋体。于是就出现了这种错误的显示，显示成简体字“将”，而不是日本汉字“将”。也许有人会说，这干我屁事啊，不是差不多！好吧，反正对于我个人来说正确性永远是第一位，所以Chrome这种我不能接受。

简而言之，抛开chrome不谈，Fx当然确实丑的不行这得承认，IE就很赞，opera则最好。

暁美ほむら 发表于 2011-10-13 19:17

firefox的勾不要勾

http://i585.photobucket.com/albums/ss296/chaoshead01/QQ20111013192628.png

==============


还有就是你最好一张图

我怎么都觉得不行？

samaleg 发表于 2011-10-13 19:23

烈之斩 发表于 2011-10-13 19:25

回 1楼(暁美ほむら) 的帖子

firefox显示正常的日文网页当然很赞啦..我的图里右上是firefox

我是指中日混合的情况下。又或者干脆就是纯日文，但是由于
1.网站是utf-8编码
2.网站master偷懒没有指定语言 所以就会显示的很丑

这确实是firefox的弱势

john 发表于 2011-10-13 19:27

我的Opera好像跟你的不一样

明日の香 发表于 2011-10-13 19:32

真·技术宅！

253

烈之斩 发表于 2011-10-13 19:35

引用第4楼john于2011-10-13 19:27发表的:
我的Opera好像跟你的不一样
   images/back.gif

我改了一下。我发现实际打开那种复杂的网页 opera和ie基本一样的

和我那个测试用的html结果不同 我也不知道为啥。。。

john 发表于 2011-10-13 19:36

另外UTF-8编码日文网页是说日本Google么，我早就调好了

子狐ちゃん 发表于 2011-10-13 19:41

认真对比，LZ真好人   

===================================

才发现我的FF是以前就设置过的，难怪以前每次JOHN老爷说日文难看的时候都会有点不解…

abc9878 发表于 2011-10-13 19:44

<html>

<head>


</head>



你好将将将こなんここと



</html>


好吧，求如何让firefox正确显示

烈之斩 发表于 2011-10-13 19:48

引用第7楼john于2011-10-13 19:36发表的:
另外UTF-8编码日文网页是说日本Google么，我早就调好了

   images/back.gif

google.com搜日文关键词可以作为firefox丑的例子 我往上面放了个图。

至于google.co.jp 他的网页里有指定语言的:
<body id=gsr bgcolor=#ffffff text=#222222 link=#1122cc vlink=#6611cc alink=#d14836 onload="try{if(!google.j.b){document.f&&document.f.q.focus();document.gbqf&&document.gbqf.q.focus()}}catch(e){};if(document.p_w_picpath)new Image().src='/p_w_picpath/nav_logo91.png'"lang=ja>

这个原来并没有，是我给他们写了封意见
http://www.google.com/support/forum/p/Web+Search/thread?tid=32ba30430fd4947c&hl=en

才加上的，我就是不能忍firefox上google搜日文太丑才…现在这样就平时基本可以忍firefox的字体了……

烈之斩 发表于 2011-10-13 19:50

引用第9楼abc9878于2011-10-13 19:44发表的:
<html>

<head>


....... images/back.gif

不能。

所以我说了半天简而言之就是一句话：firefox比另外三个都弱，但是chrome还外加一条罪状就是不能彻底地显示日语

暁美ほむら 发表于 2011-10-13 19:52

引用第10楼烈之斩于2011-10-13 19:48发表的:

google.com搜日文关键词可以作为firefox丑的例子 我往上面放了个图。

至于google.co.jp 他的网页里有指定语言的:
<body id=gsr bgcolor=#ffffff text=#222222 link=#1122cc vlink=#6611cc alink=#d14836 onload="try{if(!google.j.b){document.f&&document.f.q.focus();document.gbqf&&document.gbqf.q.focus()}}catch(e){};if(document.p_w_picpath)new Image().src='/p_w_picpath/nav_logo91.png'"  lang=ja>
....... images/back.gif


知道原因了

这只是硬件加速的原因导致的

还有就是下面的那个够不要够

还有就是不建议用宋体

jestime 发表于 2011-10-13 20:14

我用chrome，然后指定微软雅黑

ov_efly 发表于 2011-10-13 20:18

不用默认的字体就好了
比如Ilihei啥的整合字体

chakane048 发表于 2011-10-13 20:36

你那个算是中文Win，还有Chrome用了Webkit的问题，因为之前用了Safari很久所以比较了解。
因为没有font指示，系统默认回去fallback到默认状态，对win也就是serif宋sans-serif黑这样子？ 而chrome正好又fallback到了中文系统有的字库里面去了，所以产生宋体这种结果。

其实wikipedia有lang=ja了，这个不是问题，问题是“将”还有“门（简体字）”这种unicode在CJ字形不一样的问题。 CJK混排的时候选择字体就会比较233。 如果系统级别是zh>ja这样子的话就会有你所要存在的问题了。 对于类似为了排版东西整合的字体例如Hiragino Sans GB来说你那单单一个将字并不能说明什么问题，只是选择的字体差别罢了。

总而言之这是Webkit一直都没有做针对不同语言是用不同字体而是统一字体设置的原因，但是你之前讲的也有些因为主观而不对的地方，并不是你所说的那么严重。其实对于现在CSS font-family主流的做法（尤其是混排里面还会有span）来说，你上面的对比确实有点无用。

真紅 发表于 2011-10-13 20:42

LINUX下只装了文泉驿正黑字体的人表示I DON’T CARE，当然事实上确实比较难看就是了

扑克脸 发表于 2011-10-13 20:57

要求不高的话，谷歌家这套字体差不多够用了
http://cms.devbridge.com/ascendercorp.com/a0e44bc7-074c-4a8c-8c74-c02713420896.jpg

wave14 发表于 2011-10-13 21:07

自从IE有了标签页后我就找不出来折腾其他浏览器的理由了

80808080 发表于 2011-10-13 21:09

FF 全部微软雅黑 烦不鸟了
只要不是宋体下面的日文就OK了

宅男的爱 发表于 2011-10-13 21:17

……卧槽以前居然从未思考过这个问题……

chakane048 发表于 2011-10-13 21:23

好吧偶蛋疼再举两个觉得LZ这对比没用的例子吧
winxp sp3 firefox 3 chrome 14 all default clean install
Firefox

Chrome

cloudskate 发表于 2011-10-13 22:07

我看了下才发现自己电脑上字体居然几百种之多，但连平时用的是啥都不知道……

本来没觉得怎么样，让楼主一说居然越看越别捏了

求教日文系统，语言设定中文，chrome用什么字体好

ie真的觉得好慢啊

Realplayer 发表于 2011-10-14 00:11

假名汉字是另外字了吧。。。

Fx看习惯了，不觉得多丑（心理作用吗

chiman 发表于 2011-10-14 00:18

你们真能折腾

我就这么将就着看了n年了

s1mtr 发表于 2011-10-14 01:15

其实我觉得linux下的效果不错,调教起来比win下方便多了,一直也想让win也有linux下的效果,不过受制于楼上也提到的各种原因感觉好麻烦

dodolee 发表于 2011-10-14 02:36

引用第25楼s1mtr于2011-10-14 01:15发表的:
其实我觉得linux下的效果不错,调教起来比win下方便多了,一直也想让win也有linux下的效果,不过受制于楼上也提到的各种原因感觉好麻烦

   images/back.gif

求/etc/fonts/conf.d/*

s1mtr 发表于 2011-10-14 03:48

回 26楼(dodolee) 的帖子

/etc/fonts/conf.d/*目录我没有动啦，只简陋配置了~/.fonts.conf 配置文件在这里
(我只用了2个字体，没有考虑多种中文字体并存的优先级等等，so仅供粗略参考)
2个字体是Adobe Heiti Std和STheiti ~/.fonts字体打包在这里
(包里的sheiti.ttf和st.ttf都是STheiti，一个用来当AdobeHeitiStd的粗体(系统算法出来的粗体效果差，在.fonts.conf尾部有这方面的配置)，一个作本来的STheiti显示。)
Firefox的default font设置是Adobe Heiti Std

野宮匠 发表于 2011-10-14 03:51

实在无法接受中文系统下的中文显示 用了很多年日文系统

烈之斩 发表于 2011-10-14 06:21

引用第15楼chakane048于2011-10-13 20:36发表的  :
总而言之这是Webkit一直都没有做针对不同语言是用不同字体而是统一字体设置的原因，但是你之前讲的也有些因为主观而不对的地方，并不是你所说的那么严重。  其实对于现在CSS font-family主流的做法（尤其是混排里面还会有span）来说，你上面的对比确实有点无用。

....... images/back.gif

有不对的地方欢迎指出，不要光说一句“不对”嘛。

至于“无用不无用” 有人关心有人不关心罢了，何来“无用”之说。
比如中文维基百科中混排日文时 你可以用模板设定成日文，但是其方式依然是通过语言指定的方式而非指定字体（其实个人认为指定字体是一种强奸用户选择权的做法），那么对于chrome 还是没法显示成正常 这里测试：http://zh.wikipedia.org/wiki/User:烈之斩/日文显示

比如另一种，我上一个纯日文网站，甚至他都是Shift-JIS编码的，Chrome都无法做到把其中的汉字按照日文的写法正确显示，我觉得这完全是浏览器不合格的标准

总而言之，如果说顶楼提到的未指定字体/语言时字体如何显示是考验浏览器细节的地方的话，那么对于明明已经指定了语言却还不能正确显示这就是基本功的问题了，这俩原则上就不算是一类问题。

另外你那两个图，第一个我不知道你直接设定了日文字体呢还是干脆就是日文系统，我觉得不在我的讨论范围内。而下面那个Chrome的截图，之所以下面的几个将能正常显示，是因为wiktionary那个模板里直接指定了字体 (font-family: Hiragino Kaku Gothic Pro,MS PGothic,Arial Unicode MS,Code2000,sans-serif) 显然任何浏览器都能正确显示，这有什么好讨论的？你不如看看Kanji字样下面那个将字，那个只指定了语言，你看看Chrome能正常显示么？

烈之斩 发表于 2011-10-14 07:08

另外老爷，我发现一个opera的极其奇葩的bug..

打开本地的html会卡死很久(哪怕是自己保存的) 好像是js的问题：
http://my.opera.com/community/forums/topic.dml?id=1075222

烈之斩 发表于 2011-10-14 07:24

引用第17楼扑克脸于2011-10-13 20:57发表的:
要求不高的话，谷歌家这套字体差不多够用了
http://cms.devbridge.com/ascendercorp.com/a0e44bc7-074c-4a8c-8c74-c02713420896.jpg images/back.gif


教练 这

http://i733.photobucket.com/albums/ww334/ikenaikoto/DroidSansFallback.png

neverer 发表于 2011-10-14 11:20

发现自己可能是用了一个个人改版的字体，第一张图google搜索fx看起来似乎没什么问题 --

spiritlancer 发表于 2011-10-14 11:53

safari就很完美嘛

chakane048 发表于 2011-10-14 14:57

引用第29楼烈之斩于2011-10-14 06:21发表的:

有不对的地方欢迎指出，不要光说一句“不对”嘛。

至于“无用不无用” 有人关心有人不关心罢了，何来“无用”之说。
比如中文维基百科中混排日文时 你可以用模板设定成日文，但是其方式依然是通过语言指定的方式而非指定字体（其实个人认为指定字体是一种强奸用户选择权的做法），那么对于chrome 还是没法显示成正常 这里测试：http://zh.wikipedia.org/wiki/User:烈之斩/日文显示
....... images/back.gif

-_, 当然是全英文的环境下了，如果是日文偶还拿出来干嘛，只是说明Unicode一样但是在系统Preference上面不一样选取的字体不一样，如果只是文本根本说明不了任何问题，更和你所谓的混排谈不上关系。 不太了解Win下的DefaultFontFallback而已，当然应该不会出现你说的那个问题，但是这个问题仅仅发生在CJK unicode编码一样所选取的优先度而已，因为WebKit不会提示按照你所需要的语言是用指定的字体罢了。 不过关于这个问题偶想了想还是属于Webkit的bug，早在06年就已经有人提出了（https://bugs.webkit.org/show_bug.cgi?id=10874），你可以再去反映一下这个问题。


不过对于个人来说，WebKit暂时是不可能舍弃的了，自己的情况肯定是如果ja>zh的话，CJ字形也会因为主要用日文字形而乱掉了，所以暂时没办法解决。

总而言之你的观点就是应该提供不同语言的指定字体选项，第二个就是WebKit对于lang的代码的支持要更好点（看了下wiktionary那个只是多了个span class = JPAN JA而已，但是就可以显示了- -）

-_, 至于你不对的地方，第一个是测试一段txt文本。。。 然后用指定字体来说明其问题，这有什么意义？把Chrome的这个问题归结在Chrome不注重东亚用户而不是全篇用了WebKit上，最后汉字并不是所有都是宋体，而是在CJK unicode编码同样的情况下优先选取系统prefer的那个语言的字体，其实WebKit在中日文还有东西文混排的时候，字体还有排版其实都是很好的，例如自己遇到比较多的问题就是ja>cn的时候，在浏览中文网页中门这个字的筆写略字就会出现，而使得排版乱掉，无视掉lang tag而直接按照优先度选取字体想想确实也是WebKit的不足之一。

烈之斩 发表于 2011-10-14 15:38

引用第34楼chakane048于2011-10-14 14:57发表的  :

....... images/back.gif

>>-_, 当然是全英文的环境下了
我顶楼已经声明是针对简体Win7操作系统的研究了。
不过在英文下系统调用日文字符的优先级确实比中文高，我想起来在学校图书馆的电脑上机也会观察到这个现象。

>>第一个是测试一段txt文本。。。 然后用指定字体来说明其问题，这有什么意义
1.不是txt 是html
2.没有指定字体——本来测试的目的就是没有指定字体/语言时中日混杂的文字各个浏览器会怎么显示
至于Chrome/Webkit不识别lang=xx 那只是顺便提的

>>（看了下wiktionary那个只是多了个span class = JPAN JA而已，但是就可以显示了- -）
class=jpan的CSS里已经把字体写死了（见上条回复）当然可以显示了
.Jpan, .lang-ja, .Hira, .Kana {
    font-family: Hiragino Kaku Gothic Pro,MS PGothic,Arial Unicode MS,Code2000,sans-serif;
    font-size: 110%;
    font-style: normal;
}

>>把Chrome的这个问题归结在Chrome不注重东亚用户而不是全篇用了WebKit上
Chrome既然选择Webkit这个内核 那么这个内核出现的问题自然也属于浏览器的问题

>>Webkit的bug
感谢提供此bug的地址。
不过我主要是用firefox的，个人来说我更关心在未指定语言/字体时字体的选择这点，这点也是firefox做得比较差的

p.s. 你截图那俩是啥浏览器我根本看不出来。。。

白左 发表于 2011-10-14 16:36

chakane048 发表于 2011-10-14 16:39

使用记事本新建一个txt，输入测试内容，然后保存成UTF-8格式后缀为html，用各个浏览器打开就行了。
噗，你那算哪门子html啊，和显示txt有什么区别？

好吧偶刚才没去找现在去找了一下确实是因为那条Jpan的问题，这样默认就用了Hiragino Kaku了所以可以显示出来。
都说了你只想说明的是WebKit没有针对语言指定字体，从而忽略lang tag的问题。

而你出头第一个对比的意义依然是没有，你的将将如果想按照不同语言显示排版出来依然要<p>将（<span lang="ja" xml:lang="ja">将</span>）</p>注释一下就好了。 尤其是Opera那个用了日文字体以后反而整个排版乱掉了。

好吧给你的你所想要说明的结果出来吧，有空的话在这里说一些你主观的问题不如去给WebKit提提意见更好，甚至更自我的方法，用浏览器自定义CSS来个这些没有指定字体的显示字体。


好吧说一下你这个问题没有意义所在吧，对比这几个Unicode字符在不同字体显示的字形不一样的问题，而lang tag并没有给WebKit一个FontFallback从而直接从Unicode字形里面选择了其prefer的那个，但是不同字体所带来的排版问题却令人更加难以接受，所以本人才会是用为排版设计的统合字体例如Hiragino Sans GB，而不是针对一个语言使用一个特殊的字体。 这个问题偶认为最好的解决方法依然还是利用Unicode针对不同字形所设计的不同位，从而实现混排上更好的效果。

或者说是因为网页编辑者自身的问题，或者说是各个地区因为彼此之间的矛盾而不能统一这些字形，但是WebKit在这点上确实可以针对多语言做得更好，谁叫其开发者们只是重视了西文的排版罢了呢。 而一些注意到了中日文细小差别的呢，只有少数人注意到了。


各个浏览器都有其自身的问题，而你的问题只是过于主观的看待其问题所在了，而且处理问题的方式也有很多种，可惜网页工作者为了兼容不同浏览器所做的工作已经太多了，没空在来理这点小事情了。

dodolee 发表于 2011-10-14 16:45

http://msdn.microsoft.com/en-us/goglobal/bb688134.aspx
也许有点帮助？

mirari 发表于 2011-10-14 16:57

技术贴，学习！
页: [1] 2
查看完整版本: 四个主流浏览器对于中日混杂文本显示的对比