Displaying Chinese Results Ugly Mixed Font
When displaying Chinese characters, browsers may use mixed font, resulting ugly text. Here's how it shows in Ubuntu Linux (everything by default)
Here's the HTML source code.
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>test</title> </head> <body> <h1>test 1 <span>李杀网</span></h1> <h1>test 2 <span lang="zh">李杀网</span></h1> </body> </html>
test page: display Chinese on web
As of , Google Chrome, Opera, IE9, will show both lines fine. Firefox Windows will only show the second line fine. Safari screws both lines. (all on Windows)
Google Chrome on Linux also displays both lines fine.
Cause of the Problem
The cause of the problem is complex. It may be because:
- The browser doesn't know what language it is. (because the page didn't specify a language) It may be trying to use a Japanese font first, then for missing chars, backup to Chinese font.
- The user may not have a complete serif version of the Chinese font. So, it first use serif Chinese font, then for missing chars, it uses sans-serif version. [see Chinese Fonts Comparison; 中文字體比較]
[see HTML Ugly Chinese Font Serif Mismatch]
Use Sans-Serif Font
Chinese serif font is rare. So, to solve the problem, specify sans-serif font.
Tip for Displaying Multiple Languages in Browser
If your page is primarily in one specific language other than English, you should specify the lang using “meta” tag, like this:
<meta http-equiv="content-language" content="zh">
This will help the browser pick a font. Chinese, and Japanese, both contain Chinese characters.
When displaying multiple languages in a page, you can specify a language on a run of text with the “lang=…” attribute, like this. This will help browser choose the right font.
This is useful for example for bilingual pages, or pages discussing linguistics.
If you have a question, put $5 at patreon and message me.