Fonts for Chinese web pages

This site font according to the following settings, the body font size 18px, the document using Markdown editing.

Applying fonts on the WEB is a basic technique and an art. The range of choices you can choose for English fonts is too wide, and using them wisely will add a lot to your website. About the use of English fonts and collocation skills, do not repeat here, only recommend a very good video: Fundamentals of Design by Codeschool

{{More}}

The real challenge lies in the Chinese font, which is so bulky because of the special features of the Chinese fonts that it is difficult to apply other fonts to the site, except for the fonts built into the operating system. Under the premise of poor choice, how to use Chinese fonts correctly?

First of all, the following font declarations are pretty bad, so avoid using:

font-family: "Song Body";

font-family: "Song Body", Arial;

Font-family:arial, "Song Body", "Microsoft Ya Black";

Font-family:helvetica, Arial, "Chinese fine Black", "Microsoft Jas Black";

...


Chinese fonts also have English names

Many developers ignore this: although we often see font names in the operating system, such as Arial, Microsoft Jas, and XXFarEastFont-black, this is actually the display name of the font, not the name of the font file. While it is valid to use the display name directly in most cases, some users work in extreme situations, which can invalidate your font declaration.

For example, the user installs the Chinese version of the operating system (which means that the system has Chinese fonts), but switches to English as the primary language – a situation that is common among Chinese users who want to strengthen their English workouts. At this point, the operating system may not be able to find the correct font by the display name, so the first thing to remember is to declare the font name (in English) and the display name (Chinese) in the text, like this:

Font-family:simsun, "the song Body";

Font-family: "Microsoft Yahei", "Microsoft Jas Black";

Font-family:stxihei, "Chinese fine Black", "Microsoft Yahei", "Microsoft Jas Black";


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

Remember the fact that most Chinese fonts contain English letters (but are basically ugly), while English fonts do not contain Chinese characters.

In the Web page in/English mix is very common, you will never like to use Chinese font to display the effect of English, so do not forget to declare the English font first:

Font-family:georgia, SimSun, "Song Body";

Font-family:arial, "Microsoft Yahei", "Microsoft Jas Black";


Another good habit is to add the name of the English font family at the end. Font families are broadly divided into two categories: non-lined and lined, and the differences between them and the rules of use are shown in the video that this article starts with. In general, you should do this:

Font-family:georgia, SimSun, "Song Body", serif;

Font-family:arial, "Microsoft Yahei", "Microsoft Jas Black", Sans-serif;


Please note: The above two statements in the song and Microsoft Jas should not be replaced (although the exchange will not have errors), this is because from the font style, Microsoft ya Black is non-liner, and Song is lined. However, Chinese does not strictly differentiate the font family as it is in 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 a good understanding of the system fonts in commonly used operating systems such as Windows, Mac OS, and Linux family, especially in Chinese. Here, we assume that the target site will give both Windows users and Mac users the best font experience, so we can declare:

Font-family:helvetica, Tahoma, Arial, Stxihei, "Chinese fine Black", "Microsoft Yahei", "Microsoft Jas Black", Sans-serif;


What does this statement do? Let us explain (in parentheses the corresponding target operating system):

For English characters, first find Helvetica (MAC), and then find Tahoma (Win), can not find the use of Arial (Mac&win), if the above three are missing, then use the current default Sans-serif font (operating system or browser specified);
For Chinese fonts, we already know the rules. Chinese fine Black (MAC), Microsoft Jache (Win) is the default Chinese font for these two platforms.

Note Backwards compatibility

So far, our font declarations are pretty good-if you don't have to think about users who are still using older versions of the operating system. Unfortunately, the Chinese market also has a large number of users in the use of Windows XP, Arial is their main Chinese font. In order to take care of these users, you can add a fallback to Microsoft ya Black:

Font-family:helvetica, Tahoma, Arial, Stxihei, "Chinese fine Black", Heiti, "Blackbody", "Microsoft Yahei", "Microsoft Jas Black", SimSun, "Song Body", Sans-serif;


Similarly, you see that we also use blackbody as fallback for MAC systems.

Other

Is it okay to add double quotes?

OK. Some English fonts have names that are more than two words, because there are spaces in the middle of the word, so you need to wrap them up. Chinese font is very special, according to the English point of view, like Microsoft Ya Black is a word or four words? It doesn't matter, fortunately there is no space in the name of the Chinese font, so "it is no big deal."

However, no one can guarantee that this is the case in any operating system/browser environment, and if something strange happens, try it with double quotes.

Can I display a font by default? such as Microsoft Ya Black

You may have noticed that in our final font statement, the Chinese fine black is the default font (if all the Chinese fonts in the declaration are installed on your system), why should I declare the font of the MAC system first?

Arguably, the main target market for most sites is Windows users, so theoretically this is a reasonable statement:

Font-family:helvetica, Tahoma, Arial, "Microsoft Yahei", "Microsoft Jas Black", SimSun, "Arial", Stxihei, "Chinese fine Black", Heiti, "black body", sans-serif;


But it is not. In the Chinese font of the user community, a large part of the Mac people have installed the Win under the common Chinese font (this is due to Office for MAC), but very few win users to install the Chinese font under the Mac.

Therefore, it is almost impossible for a Mac to declare a font in front of a Win user (because they don't!). ), but the black body used to make fallback may replace Microsoft's location, so it might be safer to do so:

Font-family:helvetica, Tahoma, Arial, Stxihei, "Chinese fine Black", "Microsoft Yahei", "Microsoft Jas Black", SimSun, "Arial", Heiti, "black body", sans-serif;


However, please do not put Microsoft Black in the front of the Chinese font, as one of the most ugly Chinese fonts, Microsoft ya Black is not a good choice, please take care of the Mac spoiled users, thank you! (on behalf of individual views only)

BTW, if you like me not like the dull Microsoft black, then simply delete it ~

So far, although we don't have an example of the Linux family in our sample code, I'm sure you know what to do.

A little supplement

Given that some people disagree with Microsoft's black line, I might as well extend the solution above. The truth is this:


Put Microsoft ya Black in front, will cause the installation of Microsoft Ya Black font of MAC users have to face Microsoft ya Black, and in the Mac than Microsoft Ya Black more elegant Chinese fonts abound;
Put the font on the front of the MAC, but also the Windows users caused almost confusion, after all, Microsoft Ya Black is the Windows platform display the best font (so far);


1 and 2, which one is more likely to appear? I think it's an answer that doesn't have to be counted, right?

But--there are two other factors in the tangle:


Many Windows users for various reasons to shut down the ClearType, in this case, Microsoft ya Black will be miserable! But Mac font is not a good choice, the real winner? Yes, the song body.
Most of the black bodies under the Mac are blurry under Windows, while Microsoft Jas is ugly but can see at least under the Mac. (Indirect representation of the two-platform font rendering technology gap)


So in practice, the real approach to "foolproof" needs to consider the following points:


Use UA to determine the different types of fonts that are loaded differently on the platform;
Unless there is a particular reason, try to keep the text with the Arial, title and other places that can be magnified with Microsoft Jache (for Windows);
The holly under the Mac works great, but this font is not available until Mac OS X 10.6, so consider your user base carefully, or use the Chinese blackbody series for 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 how to use instead of font selection. "Beauty" or "ugly" has always been a very subjective thing, just because I am the author, so I will inevitably have a tendency, but I also believe that you will have the right judgment, and I do not have any practical significance.

This article is from Nightire, the original address.

Original link: http://designlei.com/coding/%e4%b8%ad%e6%96%87%e7%bd%91%e9%a1%b5%e7%9a%84%e5%ad%97%e4%bd%93/

Fonts for Chinese web pages