HTML Ugly Chinese Font Serif Mismatch

,
Want to master JavaScript in a week? Example based, to the point. Xah JavaScript Tutorial.

In Ubuntu Linux Firefox (as of ), when you have Chinese on the page and have generic font-family:sans-serif, and you didn't install extra Chinese fonts 〔☛ Chinese Character Etymology and Script Styles 楷軆, 宋體, …〕 it renders characters using different fonts, so it's very ugly. (this doesn't happen with Google Chrome on Linux)

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

What Can Effect Font Choice?

Page's Character Encoding

The encoding used for the page. For example encodings, see: Intro to Chinese Encoding; What Character Encoding Does Chinese Sites Use?.

Language Attribute and Lang Code's Region Sub Code

(Note: the meta language tag is obsolete. 〔☛ HTML Meta Language Tag Obsolete〕 )

Test Your Browser

Here's the tests.

The encoding for this page is UTF-8.

with 「font-family:sans-serif」

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (no lang attribute)

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh")

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh-cn")

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh-tw")

with 「font-family:serif」

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (no lang attribute)

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh")

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh-cn")

『薄云断绝西风紧,鹤鸣远岫霜林锦』 『云际依依认旧林,断崖荒草路难寻。西山望见朝来雨,南涧归时渡处深。』 『这芭蕉洞虽有,却无个铁扇仙,只有个铁扇公主,又名罗刹女。』 西游记,第五十九回 (页1) (using lang="zh-tw")

blog comments powered by Disqus