I noticed that when the Chinese characters are shown in headlines and other places sometimes my browser (Firefox 8 on Windows 7) is mixing and matching fonts in order to fill in the right characters.

Example: enter image description here

This happens because the browser tries to find installed fonts based on what language it suspects the characters are. And for some reason Firefox prefers Japanese to Chinese, thus breaking the rendering of the Chinese characters.

The way to fix this is to specify the language of the text

<span lang="zh">他妈的</span>

Otherwise, a webfont might have to be used in order to ensure that a particular client has support for the font in question, but that web font would need excellent coverage of the Hanzi range.

Edit: Some answers seem to suggest that I may be dealing with a faulty set-up. Let me re-iterate:

  • I have a default installation of Windows 7 with support for Asian scripts and input methods and have not added or removed any fonts. I also have Microsoft Office 2010 installed which may add some fonts of its own.
  • I have a default installation of Firefox and I have not played around with its fonts or css or font-stack settings.
  • I have seen this issue with every version of Windows since XP and every version of Firefox since 3.5. Somewhere around the 3.0-3.5 timeframe Firefox changed how they look up fonts and this issue was introduced.
  • Different browsers look up Chinese fonts differently. If you don't specify a particular font then you are at the mercy of the browser's language-detection features.

Edit: When Firefox has lang=zh set, the headline font selection is the same as Chrome's:

enter image description here

This looks better but is not perfect in my opinion, because it's using a serif font in a sans-serif headline.

Edit 2: I have verified that this bug still exists in the new Beta theme.

share
    
I can confirm it's messed up on FF, but I don't have this problem on Chrome/Win: i.stack.imgur.com/u72z8.png –  Orion Dec 17 '11 at 0:42
    
@NullUserException: In Chrome's case, the behaviour is more consistent, however, I still think it's wrong, because presumably the font should match the serif/sans-serif nature of the headline. –  Mr. Shiny and New 安宇 Dec 17 '11 at 2:18
    
I confirm I have the same bug on Windows 7 / Firefox 8 –  this.lau_ Dec 23 '11 at 2:28
add comment

4 Answers

Not all fonts possess all characters... We should find a font that is spread enough (or alternatively choose a free one and maybe link it for download) and that has a high support and stick with it.

share
    
In this case the browser will choose from the installed fonts based on the language it thinks it is using, and the Japanese fonts don't have the same coverage as the Chinese fonts. Firefox by default prefers Japanese over Chinese which is what leads to this mismatch, because we are using characters that are common to both languages and some characters that don't exist in Japanese. –  Mr. Shiny and New 安宇 Dec 20 '11 at 13:29
    
For information, there is no good free (as in open source) Chinese font available. The closest would be the "AR PL UKai" series, as used in some Linux distributions, but it has many, many mistakes (wrong characters, traditional/simplified confusion, etc.). Technically, the best solution might be to do as the OP suggested - use the "lang" attribute and let the browser do the rest. Maybe we could also suggest some general families like "kaiti", "ming", etc. and display that if it's installed on the user's computer. –  this.lau_ Dec 23 '11 at 12:45
add comment

I am using Ubuntu Linux with Chrome browser. The Chinese characters in the headlines are bold. This means that any complex characters become simply blue splodges with no discernible detail that would allow the character to be read easily. See the screen shots below for examples:

Blured character. Blured character. enter image description here

While I recognise that this site is still in beta, if it is to transition out of beta, the theme designer would do well to choose a non-bold font weight for the headlines.

share
add comment

I do not have this problem, I use Mac OS X 10.7, tested on Safari/Firefox

share
    
Presumably, the MacOS font features are different than Windows's. I've seen the problem in every version of Firefox since 3.5 on Windows XP, Vista, and 7. I've even seen it in some other browsers. –  Mr. Shiny and New 安宇 Dec 14 '11 at 16:39
add comment

Dont' think this is a bug on the site's side - probably a setting in your browser/computer. I actually bumped into this problem and asked a question about it... Some characters look different handwritten and on the computer - how to learn the differences?

share
    
I have a default installation of Windows 7 with default support for Asian languages and a default installation of Firefox 8. If this is not a tier-1 supported platform with its default settings, then what in the world would be? Also: I have seen this on every Windows version since XP combined with every Firefox version since 3.5. It may be a "browser bug" but it is trivially worked around by setting html attributes in the code. –  Mr. Shiny and New 安宇 Dec 20 '11 at 13:31
add comment

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .