Font display problem of Chinese characters in CJK languages


Currently, there is no good solution for simultaneous proper display of Chinese characters in Simplified Chinese, Traditional Chinese, Japanese and Korean in web browsers. Google’s Noto CJK (or Adobe’s Source Han 思源字体) covers all CJK languages, but how to display Chinese characters correctly in browsers is another problem yet to solve. In most occasions, this site displays Simplified and Traditional Chinese correctly but not kanji or hanja unless a Japanese or Korean font or a lang HTML attribute is specifically set. The latter may not work.

This Zhihu question is about cross-platform display of Chinese characters: 如何保证网页的字体在各平台都尽量显示为最高质量的黑体.

This article also helps: Languages and Chinese characters on the web.

The following table is for testing purpose 测试用 (no lang attribute or font set).

Language Texts
简体中文(中国大陆) 为有源头活水来。编纂 乘坐 云
繁體中文(中國大陸) 爲有源頭活水來。所 編纂 乘坐 雲
日本語 源頭の活水有るが為よりして来る 所 編纂 乗る 雲 沢山 画面
한국어 문자 文字 李世乭
English first post.

沢山 画面 所 来た 篇 乗る 雲 (with lang attribute set to “jp”.)

沢山 画面 所 来た 篇 乗る 雲 (with font set to “MS Mincho”.)

My current font setting is:

$font-serif: "PT Serif", Georgia, "Times New Roman", "Source Han Sans CN", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", "MS Pゴシック", serif;
$font-sans:  "PT Sans", Helvetica, Arial, "Source Han Sans CN", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Zen Hei", sans-serif;
$font-font-awesome: FontAwesome;

The first post on my new site. Font test.