5

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.

6
  • 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, 2011 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, 2011 at 2:18
  • I confirm I have the same bug on Windows 7 / Firefox 8
    – laurent
    Dec 23, 2011 at 2:28
  • Do you have a fix to let Firefox choose Chinese variants before Japanese ones? I know this is possible because I fixed it many years ago and it works on my old (US English locale) Windows XP computer. But I don't remember how I did it ...
    – Szabolcs
    Mar 25, 2015 at 16:23
  • @Szabolcs There is information at this bug that explains what is wrong. It seems that if you set your system locale to Chinese it solves the problem. Otherwise, the fix is "Use Chrome", it seems. The only way to fix it for everyone is for the site to specify a Chinese font, but the powers that be seem unwilling to do even that simple thing.
    – Mr. Shiny and New 安宇
    Mar 25, 2015 at 16:57
  • @Mr.ShinyandNew安宇 I finally figured it out. It was a simple setting. I wrote an answer.
    – Szabolcs
    Mar 25, 2015 at 19:40

7 Answers 7

Reset to default
2

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.

1

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.

2
  • 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, 2011 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.
    – laurent
    Dec 23, 2011 at 12:45
1

To fix this in Firefox, you need to do two things:

  1. Go to Preferences → Content → Languages → Choose... and add "Chinese/China [zh-cn]" as a language. Make sure you add zh-cn and not zh. If your main language is not Chinese, you may want to add this at the bottom of the list. Keep English or whatever your main language is at the top. Now restart Firefox (important).

    What this does (among other things) is tells Firefox to choose a Chinese font when a website has Chinese characters but no language specified. By default, the English version of Firefox will choose a Japanese font, not a Chinese one.

  2. On Windows only, you may want to set better Chinese fonts as the defaults in Firefox. Go to Preferences → Content → Fonts & Colors, then click Advanced... Under "Fonts for", choose "Simplified Chinese". Now under "Sans-Serif", choose "Microsoft YaHei" and make sure "Proportional" is set to the default "Sans Serif". Finally, set the "Fonts for" dropdown back to whatever it was originally (e.g. "Latin").

You're set now, everything should display beautifully, with Chinese defaults, and without affecting your main language.

5
  • I added Chinese as a language and it did nothing.
    – Mr. Shiny and New 安宇
    Mar 25, 2015 at 19:40
  • @Mr.ShinyandNew安宇 I forgot to say that after doing 1. you need to restart Firefox. You can also test by typing 令 in Google, which has a markedly different shape in Chinese and Japanese fonts.
    – Szabolcs
    Mar 25, 2015 at 19:41
  • @Mr.ShinyandNew安宇 Take a look.. The screenshot is on Mac, but I just did the same thing on Windows too.
    – Szabolcs
    Mar 25, 2015 at 19:45
  • Okay, when I tried this earlier, I did (or thought I did) restart Firefox, and it didn't work, but after you posted this answer, I restarted Firefox just to check and it seems to be working. I still maintain that the website should indicate what language the text is, either with lang attributes or by specifying a Chinese font (which can be done unobtrusively so that it doesn't disrupt things). This workaround just means that, eg, japanese.se will no longer display its kanji properly.
    – Mr. Shiny and New 安宇
    Mar 25, 2015 at 19:45
  • @Mr.ShinyandNew安宇 Sure, websites should definitely indicate the language. I wasn't focusing on what Chinese.SE does. I had this problem with all the other websites out there, and I have no influence over them. But yes, all websites should indicate the language for this reason.
    – Szabolcs
    Mar 25, 2015 at 19:47
1

As a comment on the status-declined flag, I want to clarify that this is not a browser bug.

Some Unicode characters have different shapes for different languages. Yes, those are characters with the exact same code point, yet they have different shapes. The browser can only make the correct choice on what to display (what font to use) if it knows the language of the website. When the website specifies no language (or doesn't specify Chinese or Japanese specifically), the browser falls back on a default choice. For Firefox, the default is Japanese. For Chrome and IE, it's Simplified Chinese. Once again, this is not a bug, just a difference in the default fallback.

The solution is for the website to specify a language explicitly. If StackExchange does not specify the language for Chinese character text on websites such as Chinese.SE and Japanese.SE, one of them will always render wrong in some browser.

It appears that Japanese.SE does specify the language for Japanese text, but Chinese.SE does not. This as well suggests that this is a problem with the website itself ... It's not a problem with browsers. It's a problem with Chinese.SE.

enter image description here

Update

This script is responsible for the language tags on Japanese.SE. From the script source:

It also:

As I said, if Chrome displays Chinese correctly by default, it won't display Japanese correctly by default. At least not without language tags. I hope this makes it clear that it is the responsibility of Chinese.StackExchange to fix this issue, not that of browser developers.

1
  • This is still an issue, four years later. That script seems trivial to change the lang tags of (and possibly remove matching Kana characters). There is difference in fonts between PRC and ROC, but atleast this would be configurable by the user, and Japanese would not likely be automatically used. Why is it still not implemented and who could do it?
    – gnucchi
    Apr 19, 2019 at 0:10
0

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

1
  • 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, 2011 at 16:39
0

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?

1
  • 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, 2011 at 13:31
-1

@Jin may weigh in at some point, but this isn't really an issue we can fix easily. Firstly, it appears that only Firefox does this wrong. Secondly, every Chinese site has this issue because of the sad state of Chinese fonts available (apparently).

It looks like there are a pretty good selection of free fonts here: http://www.justfont.com/fonts/. I'm can't read Chinese, but this one looks nice to me.

I'll check on the idea of font embedding and update this answer when I can say something more definitive.

Update: We've given this a bit more thought and research, and unfortunately the final result is that we're not going to do anything about this. The truly right answer is that users simply have to configure their own fonts if they want it to work correctly. However, that being said, we often try to find workarounds so that our users don't have to be expert sysadmins to get a decent experience.

As I mentioned above, font-embedding won't really solve the problem. The other idea was to try to make use of the lang="zh" attribute. The problem with that approach is that attribute is supposed to specify the language for the page (if used in <html>) or the block or span-level tag. It won't work for blocks/spans because all the places where this comes into play are user content, and it's incorrect for <html> because the language for the page is still English. It's not a good idea to trade one browser's incorrect handling of font selection for potentially other browser's incorrect handling of language detection.

I'm sorry to not be able to give you anything better, but this is really a Firefox bug that they need to fix.

9
  • There are specific, concrete solutions in the question. 1: set the lang attribute. 2: use a webfont (maybe google Noto).
    – Mr. Shiny and New 安宇
    Oct 16, 2014 at 16:17
  • I'm looking into this more and I'll update my answer to address these more specifically. I did see them, and I forgot to address them.
    – Ben Collins
    Oct 16, 2014 at 16:29
  • Your edit addresses why not using the lang attribute, but doesn't really address why not using a webfont.
    – Mr. Shiny and New 安宇
    Nov 12, 2014 at 17:21
  • Eh, I kinda did up at the top. @Jin can probably explain better, but he didn't think font embedding would help (and it would make the page slower to load).
    – Ben Collins
    Nov 12, 2014 at 17:24
  • This FF bug explains that the problem can be worked around by the website by specifying Chinese fonts. I've tested that this works; you can change font in all.css to say font-family: "Helvetica Neue",Helvetica,Arial,sans-serif,SimSun and the problem goes away. With a tiny bit of effort at finding a list of commonly-used Chinese font families, this problem could be solved without a webfont.
    – Mr. Shiny and New 安宇
    Mar 25, 2015 at 17:01
  • @Mr.ShinyandNew安宇 Good find, but I'm no longer with SE, so you'll need to flag another dev to get this fixed.
    – Ben Collins
    Mar 25, 2015 at 17:16
  • Got it, thanks. Sorry to bother you.
    – Mr. Shiny and New 安宇
    Mar 25, 2015 at 17:22
  • Not a problem at all, just want to help you get the issue fixed ;-)
    – Ben Collins
    Mar 25, 2015 at 17:23
  • I wanted to clarify that this is not a browser bug. It's indeed a problem with Chinese.SE. I wrote an answer to explain. The truly right answer is that the site needs to specify a language tag, not that users need to install fonts.
    – Szabolcs
    Mar 25, 2015 at 20:16

You must log in to answer this question.

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