WEB Chinese Font Application Guide

The real challenge lies in Chinese fonts. Due to the particularity of Chinese fonts, their size is too large. In addition to the built-in fonts of the operating system, it is difficult for us to apply other fonts on the website. How to use Chinese fonts correctly when there are few options?

First of all, the following font declarations are bad and should never be used:

Font-family: "Song"

Font-family: "宋体", Arial;

Font-family: Arial, "Songti", "Microsoft YaHei";

Font-family: Helvetica, Arial, "Huawen Xihei", "Microsoft Yahei";

Next, we will explain step by step how to define a good font declaration.

Chinese fonts also have English names

Many developers overlook this point: although we often see font names such as Songti, Microsoft Yahei, and Huawen Xihei in the operating system, in fact, these are just the display names of the fonts, not the names of the font files. While using the display name directly will work in most cases, some users work in extreme cases which will render your font declaration invalid.

For example, a user installed the Chinese version of the operating system (which means the system has Chinese fonts), but switched to English as the primary language - this is very common among Chinese users who want to improve their English. At this time, the operating system may not be able to find the correct font according to the display name, so the first thing we have to remember is: declare the font name (English) and display name (Chinese) of the Chinese font at the same time, like this:

Font-family: SimSun, “宋体”

Font-family: “Microsoft YaHei”, “微软雅黑”

Font-family: STXihei, "Huawen Xihei", "Microsoft YaHei", "Microsoft YaHei"

Never forget to declare English fonts, and English fonts should be before Chinese fonts

Remember this fact: most Chinese fonts contain English letters (but they are basically ugly), but English fonts do not contain Chinese characters.

It is very common to have Chinese and English mixed in web pages. You will never like the effect of using Chinese fonts to display English, so don't forget to declare the English font first:

Font-family: Georgia, SimSun, “宋体”

Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

Another good habit is to add the name of the English font family at the end. Font families are generally divided into two categories: sans serif and serif. Please see the video at the beginning of this article for the differences and usage rules between them. Generally speaking, you should do this:

Font-family: Georgia, SimSun, “宋体”, serif

Font-family: Arial, “Microsoft YaHei”, “微软雅黑”, sans-serif

Please note: Songti and Microsoft YaHei in the above two statements should not be swapped (although no error will occur if they are swapped). This is because from the font style point of view, Microsoft YaHei is non-serif, while Songti is serif. However, Chinese does not distinguish font families as strictly as English, so this is not so important in practical applications.

Don't forget to take care of different operating systems

As a web developer, you should have enough knowledge about system fonts in common operating systems such as Windows, Mac OS, and Linux family, especially Chinese. Here, we assume that the target website wants to give the best font experience to both Windows users and Mac users, so we can declare it like this:

Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif

What does this statement do? Let's explain them one by one (the brackets represent the corresponding target operating system):

For English characters, first search for Helvetica (Mac), then search for Tahoma (Win), and if neither is found, use Arial (Mac & Win); if all three are missing, use the current default sans-serif font (specified by the operating system or browser);

For Chinese fonts, we already know the rules. Huawen Xihei (Mac) and Microsoft Yahei (Win) are the default Chinese fonts for these two platforms.

Pay attention to backward compatibility

So far, our font declarations are pretty good - if you don't have to worry about users who are still using older versions of the operating system. Unfortunately, there are still a large number of users in the Chinese market who use Windows XP, and Songti is their main Chinese font. To take care of these users, you can add a fallback for Microsoft YaHei:

font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, Heiti, “黑体”, “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, sans-serif

Likewise, you can see that we also use bold as fallback for Mac systems.

other

Is it ok to not use double quotes?

Can. Some English font names have more than two words, and because there are spaces between the words, they need to be wrapped in "". Chinese fonts are very special. From an English perspective, is Microsoft YaHei one word or four words? It doesn't matter. Fortunately, there are no spaces in the names of Chinese fonts, so it doesn't matter if you don't add "".

However, no one can guarantee that this will work in any operating system/browser environment. If something strange happens, try adding double quotes.

Can a certain font be displayed by default? For example, Microsoft YaHei

You may have noticed that in our last font declaration, Huawen Xihei is the default font (if all the Chinese fonts in the declaration are installed on your system). Why do I declare the fonts for the Mac system first?

Logically speaking, the main target market for most websites is still Windows users, so in theory this is a reasonable statement:

Font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "Microsoft YaHei", SimSun, "Songti", STXihei, "Huawen Xihei", Heiti, "Heiti", sans-serif

But in reality, this is not the case. Among the Chinese font users, a large number of people who own Macs also install commonly used Chinese fonts for Windows (thanks to Office for Mac); but very few Windows users install Chinese fonts for Mac.

Therefore, putting the Mac font declaration in the front will hardly have any impact on Windows users (because they don't have it at all!), but the bold font used as a fallback may replace Microsoft YaHei, so the safer approach may be this:

Font-family: Helvetica, Tahoma, Arial, STXihei, "Huawen Xihei", "Microsoft YaHei", "Microsoft YaHei", SimSun, "Songti", Heiti, "Heiti", sans-serif

But please don't put Microsoft YaHei at the top of the Chinese fonts. As one of the ugliest Chinese fonts in history, Microsoft YaHei is not a good choice. Please take care of the users who are spoiled by Mac. Thank you! (Only represents personal opinion)

BTW, if you don’t like Microsoft YaHei like me, just delete it.

So far, although there are no examples for the Linux family in our sample code, I believe you understand what to do.

A little supplement

In view of the fact that some people have objections to the ranking of Microsoft Yahei, I might as well extend the above solution a step further. The truth is this:

Putting Microsoft YaHei in front will cause Mac users who have installed Microsoft YaHei font to have to face Microsoft YaHei, while there are many Chinese fonts on Mac that are much more elegant than Microsoft YaHei;

Putting Mac fonts in the front will cause similar confusion to Windows users, after all, Microsoft YaHei is the best font for Windows platform (so far);

Which one is more likely to appear, 1 or 2? I think this is an answer that can be known without calculation, right?

But - there are indeed two other factors at play:

Many Windows users have turned off ClearType for various reasons. In this case, Microsoft YaHei will be terrible! But Mac fonts are not a good choice either. The real winner? You guessed it, Songti.

Most bold fonts on Mac are blurry on Windows, but Microsoft YaHei is ugly but at least viewable on Mac. (This indirectly reflects the gap in font rendering technology between the two platforms)

So in practice, a truly "foolproof" solution requires considering the following points:

Use UA to determine which fonts to load for different platforms;

Unless there is a special reason, try to keep the main text in Songti, and use Microsoft YaHei (for Windows) for titles and other places that can be enlarged;

Holly works great on Mac, but it was not available before Mac OS X 10.6, so consider your user base carefully, or use the Chinese Hei font series as a fallback;

Finally, I don’t want to argue with anyone about the pros and cons of fonts. The purpose of this article is to introduce usage rather than font selection. "Beauty" or "ugliness" has always been a very subjective thing. Just because I am the author, I can't help but have a bias. However, I also believe that you will have the correct judgment. There is no practical point in arguing with me.