A Guide to Chinese CSS Font Family Declarations

http://www.kendraschaefer.com/2012/06/chinese-standard-web-fonts-the-ultimate-guide-to-css-font-family-declarations-for-web-design-in-simplified-chinese/

by kaptain • 12 years ago

36 14 12 years ago

kendraschaefer.com

Kiro• 12 years ago

I didn't even know it existed different Chinese fonts. Shows how narrow-minded I am.

thaumasiotes• 12 years ago

Try using QQ to talk to Chinese people and you'll quickly become aware. Tencent has made the "interesting" design decision to have you perceive other people's messages in the font of their choice, not your choice.

Presumably not an issue for real Chinese people, but it can give me difficulties.

matthewrudy• 12 years ago

A good example of bad Chinese font use is Facebook chat (in a desktop browser).

The font is tiny, and with traditional characters can be very difficult to read.

igl• 12 years ago

That's weird. Specially since traditional characters are mostly used in Taiwan and Hong Kong, where facebook should be accessible.

lepture• 12 years ago

I've written an article on Chinese fonts too. But it is in Chinese: http://lepture.com/zh/2014/chinese-fonts-and-yue-css

TheSisb2• 12 years ago

This is extremely helpful for someone trying to internationalize a website or web application to Chinese. I really do hope more work in this domain comes out and I learned many interesting things from the article. Thanks for taking the time to write about your findings!

ttflee3• 12 years ago

微软雅黑体：Microsoft YaHei [as of Win7]

It is wrong to attribute Microsoft YaHei to Windows 7. YaHei was actually introduced with Windows Vista.

ttflee3• 12 years ago

While SimHei is not of as good quality as YaHei, I still have guts with YaHei, which renders a lot of glyphs with fluctuating baselines. Maybe it was the fault of Windows that renders glyphs of small sizes in a bad way, but I do hate the images using Microsoft Yahei, some of which were created in Photoshop on Windows.

Sometimes I even prefer SimSun, which is a serif font, and a bitmap font not supporting sub-pixel rendering, at least it has aligned baselines.

yzzxy• 12 years ago

As the owner of a chinese-language website, I've read this guide (alongside many others) several times and found it extremely useful. However, I still have issues getting the same (standard) fonts to show up in every browser. I wonder if this is an issue on my side, or due to browsers not handling Chinese fonts adequately.

be5invis• 12 years ago

There is a serious problem: Most Chinese fonts are HUGE, especially when you want to cover both Simplified and Traditional glyphs. For example, a CFF OTF Chinese font, covering all Han characters in BMP is about 34MB large, while its TTF variant is 12 MB.

And there is still no good automatic way to generate gridfits, though there is one for LGC, and Chrome is moving to Direct2D.

kylebrown• 12 years ago

But most pages in Chinese won't be showing all 10k+ glyphs on the same page. Small pages won't have very many characters at all, a few paragraphs would only be a few hundred different characters, so a minimal font file would be on the order of kilobytes. 3k+ characters covers 98% of the text in a common newspaper, that font file is on the order of a megabyte.

I've used FontForge to export much smaller font files containing only particular characters. But there are also ways to store char fonts in json using libs like typeface.js and cufon.

ttflee3• 12 years ago

the order of a megabyte which is not acceptable for loading a web page.

Gigablah• 12 years ago

"If you are choosing fonts for a site that targets mainland China, choose GB2312. If you are targeting Hong Kong, China towns abroad and immigrant communities, Taiwan, etc., use Big5."

Malaysia and Singapore have also adopted simplified Chinese (GB2312).

shanehou• 12 years ago

Well, actually if you search for "免费中文字体" in baidu.com and find "下载" in the pages you've got, you'll very likely find out what you've downloaded are not font files, but some annoying and useless ads or even virus. So anyway, use Google.

A Guide to Chinese CSS Font Family Declarations

Related Stories