7 ms·

A Guide to Chinese CSS Font Family Declarations

36 points by kaptain 12y ago

Kiro 12y ago
I didn't even know it existed different Chinese fonts. Shows how narrow-minded I am.
- thaumasiotes 12y 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 12y 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 12y ago
  That's weird. Specially since traditional characters are mostly used in Taiwan and Hong Kong, where facebook should be accessible.
lepture 12y 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 http://lepture.com/zh/2014/chinese-fonts-and-yue-css
TheSisb2 12y 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!
ttflee 12y ago
> 微软雅黑体：Microsoft YaHei [as of Win7] It is wrong to attribute Microsoft YaHei to Windows 7. YaHei was actually introduced with Windows Vista.
ttflee 12y 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 12y 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 12y 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 12y 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.
  - ttflee 12y ago
    > the order of a megabyte which is not acceptable for loading a web page.
Gigablah 12y 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 12y 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.

36 points by kaptain 12y ago

Kiro 12y ago

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

thaumasiotes 12y 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 12y 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 12y ago
That's weird. Specially since traditional characters are mostly used in Taiwan and Hong Kong, where facebook should be accessible.

lepture 12y 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 http://lepture.com/zh/2014/chinese-fonts-and-yue-css

TheSisb2 12y 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!

ttflee 12y ago

> 微软雅黑体：Microsoft YaHei [as of Win7] It is wrong to attribute Microsoft YaHei to Windows 7. YaHei was actually introduced with Windows Vista.

ttflee 12y 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 12y 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 12y 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 12y 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.
- ttflee 12y ago
  > the order of a megabyte which is not acceptable for loading a web page.

Gigablah 12y 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 12y 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.