Displaying Chinese Results Ugly Mixed Font

By Xah Lee. Date: . Last updated: .

When displaying Chinese characters, browsers may use mixed font, resulting ugly text. Here's how it shows in Ubuntu Linux (everything by default)

chinese char in linux firefox
Chinese characters in Linux. Note the motley fontfaces.
chinese char in Windows firefox
Chinese characters in Windows

Here's the HTML source code.

<!doctype html>
<meta charset="utf-8" />

<h1>test 1 <span>李杀网</span></h1>

<h1>test 2 <span lang="zh">李杀网</span></h1>

chinese char in Windows firefox 2
Chinese shown in Ubuntu Linux, as of 2012-07-27.

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:

[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.

<span lang="zh">…</span>

This is useful for example for bilingual pages, or pages discussing linguistics.

Like it? Help me by telling your friends. Or, Put $5 at patreon.

Or, Buy JavaScript in Depth

If you have a question, put $5 at patreon and message me.

Web Dev Tutorials