Tradtional Chinese fonts for website

Question

anyone know common usage of Tradtional Chinese fonts for website?

I have come up with this list after a bit of Googling, but not sure.

微軟正黑體, Microsoft JhengHei

新細明體, PMingLiU

細明體, MingLiU

Answer 1

I have checked a few random news sites from HK and Taiwan, here are some examples of defining the font or font-family property:

font-family: PMingLiu, mingliu, "細明體_HKSCS-ExtB", "Ming(for ISO10646)ExtB", Arial, Helvetica, sans-serif;

font: 18px/1.7 "Microsoft YaHei", "Verdana", "Arial", "PMingLiU", "sans-serif";

font: 15px/24px Simsun;

font-family: "宋体";

font-family: "Microsoft YaHei","微软雅黑","黑体","宋体";

font: 12px/1 Arial,Tahoma,Helvetica,"宋体",sans-serif;

font-family: "Microsoft yahei";

A couple of notes:

• As you can see, most sites (at least news sites) rely on system fonts. The key here is that the visitors of these websites come from HK or Taiwan, etc. and the web designer can "safely" assume that the visitor will have support for at least one of the fonts (installed on their system). If not, Chinese language OS-s (whether Windows, OSX or Linux) will typically have at least one font that supports CJK glyphs, so their browser has a fallback font in case none of the listed font-family values can be mapped to a system font. On Linux, even if your system is not in Chinese, you most likely have a fallback font that support CJK characters, on my Ubuntu in Firefox it's Droid Sans Fallback that the browser uses, as my computer currently has almost no CJK fonts installed.

• If you plan to design a website that uses Chinese text, you should prefer sans-serif fonts over serif fonts, as the latter ones do not look nice when the font-size is small. Most Chinese websites actually do so.

• If you are planning to use English (Latin character text) and Chinese, make sure that you put the English (Latin character) font to the front of you font stack, otherwise you will end up with those fonts not displaying at all. The reason is that most Chinese fonts have support for Latin characters, but those Latin glyphs usually do not look very nice. So if you want your English text to be set in Roboto and your Chinese in PMingLiu use:

  font-family: Roboto, PMingLiu;

• Here is an article in English on this topic, it is worth at least skimming, to see if there is something you could use.

• There are some Chinese web fonts (similar to Google Fonts), but this is still experimental and not so wide spread.

• To be on the safe side, define a variety of fonts in your stack, with listing the ones you prefer before the other ones. You shouldn't be afraid of listing 6-7 different fonts, your CSS line is just a few bytes, so this will not bloat your code by modern standards. Also, you can see from the above examples that some font names are typed out in Chinese, which might trick you, if the font is saved under a pinyin name, so you can type out both the Chinese and the pinyin spelled name as separate declarations to be fully covered, e.g. font-family: ..., "黑体", "HeiTi", ...

If a font cannot be found, your browser will just move on to the next one in the stack, it's not gonna break.

---

UPDATE:

• You should never use Windows fonts only, not everyone is on a Windows computer, infact most people now browse the internet on a smartphone or tablet, which are typically running an OS other than Windows. These devices are unlikely to have Windows fonts installed (mostly because of copyright issues). Android devices usually have Droid Sans Fallback to display Chinese characters.

• You can not just assume that "OS takes care for everything". Probably you have a preference for a certain font, which makes your site look good, but that is not necessarily the font your browser will pick by default. There are many odd looking Chinese fonts that you want to avoid, so look around on a few websites, use the Developer Tools module of your browser and check what fonts are being used, how font stacks are defined.

Example: Viewing what fonts are used for a certain piece of text in Firefox (Rules tab):

... and what fonts actually display (in my case I don't have any of those fonts installed; Fonts tab):

You can also check a number of websites about what Chinese fonts are installed by default on certain operating system, e.g. OSX, Windows and Android.

Answer 2

I don't think it is a proper question for this site, but I do web developing as well.

The reality

As you know, Chinese fonts are not easy to make because we have thousands of characters, so we only have a few fonts. The most used fonts are PMingLiU(serif), Microsoft JhengHei(san-serif) and image font for headings like in Apple's website.

How I would implement

We do not use web font because who would want to download a 30MB file? Different PC uses different names for fonts so it's best to do

font-family: "微軟正黑體", "Microsoft JhengHei", "Microsoft JhengHei UI", “微軟雅黑”, "Microsoft YaHei", "Microsoft YaHei UI", sans-serif;

It is to ensure they load the font. Also, you can treat MingLiU as a fallback for PMingLiU.

How Microsoft does it

font-family: "Microsoft JhengHei UI","Microsoft JhengHei",Pmingliu,"Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,sans-serif;

The above is copied from Outlook.com in Traditional Chinese.

Other than Windows 7+

Also, Windows XP or older do not have the sans serif 微軟正黑體, only PMingLiU. Windows default Chinese font in browser is PMingLiU, serif. While Mac uses sans serif font by default, HeiTi TC and HeiTi SC. In short:

• Windows XP-: No sans-serif TC font
• Mac OSX: Uses sans-serif for TC and SC Chinese in Unicode & GBK & Big5 charsets.
• Linux Ubuntu: Uses sans-serif for TC and SC Chinese.

All the above have PMingLiU or similar serif Chinese font installed.