Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to use WEB Chinese font". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn how to use WEB Chinese font.

Using fonts on Web is a basic technology as well as an art. There is a wide range of choices for English fonts, and the proper use of them will add a lot of color to your website.

The real challenge lies in the Chinese font, which is too large due to the particularity of the composition of the Chinese font, so it is difficult for us to apply other fonts on the website except the fonts built into the operating system. Under the premise of poor selectivity, how to use Chinese fonts correctly?

First of all, the following font statements are terrible, so don't use them:

Font-family: song style

Font-family: "Song style", Arial

Font-family: Arial, Song style, Microsoft Yahei

Font-family: Helvetica,Arial, "Chinese Fine Black", "Microsoft Yahei"

Next, let's explain step by step how to define a good font declaration.

Chinese fonts also have English names.

Many developers ignore this point: although we often see font names such as Song style, Microsoft Yahei and Chinese Fine Black in the operating system, these are actually the display names of fonts, not the names of font files. Although it is effective to use the display name directly in most cases, some users work in some extreme cases, which can invalidate your font declaration.

For example, users install a Chinese version of the operating system (which means the system has Chinese fonts), but switch to English as the main language-a common situation among Chinese users who want to strengthen their English training. At this point, the operating system may not be able to find the correct font according to the display name, so the first thing we need to remember is to declare both the font name (English) and the display name (Chinese) of the Chinese font, like this:

Font-family: SimSun, Song style

Font-family: "Microsoft YaHei", "Microsoft Yahei"

Font-family: STXihei, "Chinese Fine Black", "Microsoft YaHei", "Microsoft Yahei"

Never forget to declare English fonts, and English fonts should precede Chinese fonts

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

Chinese / English mixed typesetting is very common on web pages, and you will definitely not like the effect of displaying English in Chinese fonts, so don't forget to declare English fonts first:

Font-family: Georgia, SimSun, Song style

Font-family: Arial, "Microsoft YaHei", "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. The differences and rules of use between them can be found in the video introduced at the beginning of this article. In general, you should do this:

Font-family: Georgia, SimSun, Song style, serif

Font-family: Arial, "Microsoft YaHei", "Microsoft Yahei", sans-serif

Please note: the Song style and Microsoft Yahei in the above two statements should not be exchanged (although the replacement will not make an error), this is because from the style of the font, Microsoft Yahei is not serif, while Song is serif. However, Chinese is not as strict as English in distinguishing font families, so this is not so important in practical application.

Don't forget to take care of different operating systems.

As a Web developer, you should know enough about the system fonts in Windows, Mac OS, Linux family and other common operating systems, especially in Chinese. Here, we assume that the target site wants to give both windows and mac users the best font experience, so we can declare:

Font-family: Helvetica, Tahoma, Arial, STXihei, "Chinese Fine Black", "Microsoft YaHei", "Microsoft Yahei", sans-serif

What does this statement do? Let's explain one by one (the corresponding target operating system is represented in parentheses):

For English characters, first look for Helvetica (Mac), then look for Tahoma (Win), and use Arial (Mac&Win) if you can't find them. If all three are missing, the current default sans-serif font (specified by operating system or browser) will be used.

For Chinese fonts, we already know the rules. Mac and Win are the default Chinese fonts for these two platforms.

Pay attention to backward compatibility

So far, our font statement is pretty good-- if you don't have to think 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 using Windows XP, and Song style is their main Chinese font. To take care of these users, you can add a fallback to Microsoft Yahei:

Font-family: Helvetica, Tahoma, Arial, STXihei, "Chinese Fine Black", Heiti, "boldface", "Microsoft YaHei", "Microsoft Yahei", SimSun, "Song style", sans-serif

Similarly, you can see that we also use boldface as fallback for the Mac system.

Other

Is it okay not to add double quotation marks?

Sure. Some English fonts have more than two words, so they need to be wrapped in "" because there are spaces in the middle of the words. Chinese font is very special, according to the English point of view, such as Microsoft Yahi is one word or four words? It doesn't matter. Fortunately, there are no spaces in the name of the Chinese font, so it doesn't matter if you don't add it.

However, no one can guarantee that this will be the case in any operating system / browser environment, and 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 final font statement, Chinese 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?

In theory, the main target market for most sites is Windows users, so in theory this is a reasonable statement:

Font-family: Helvetica, Tahoma, Arial, "Microsoft YaHei", "Microsoft Yahei", SimSun, "Song style", STXihei, "Chinese Fine Black", Heiti, "boldface", sans-serif

But in fact this is not the case. Among Chinese font users, a large number of Mac owners also install Chinese fonts commonly used in Win (thanks to Office for Mac), but very few Win users install Chinese fonts under Mac.

Therefore, declaring Mac in font first will have little impact on Win users (because they don't have it at all!), but the boldface used to make fallback may take the place of Microsoft Yahi, so it might be safer to do this:

Font-family: Helvetica, Tahoma, Arial, STXihei, "Chinese Fine Black", "Microsoft YaHei", "Microsoft Yahei", SimSun, "Verdana", Heiti, "boldface", sans-serif

But in any case, please do not put Microsoft Yahei in front of Chinese fonts. As one of the ugliest Chinese fonts in history, Microsoft Yahei is really not a good choice. Please take care of users who are spoiled by Mac. Thank you! (personal opinion only)

BTW, if you don't like stupid Microsoft Yahei as much as I do, just delete it.

So far, although the example of the Linux family is not included in our sample code, I'm sure you know what to do.

A little bit more.

In view of some people's disagreement with Microsoft Acer's ranking, I might as well take 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 Chinese fonts that are much more elegant than Microsoft Yahei can be found everywhere under Mac.

Putting fonts in front of Mac will also cause similar confusion to Windows users. After all, Microsoft Yahi is the best font to display on Windows (so far).

Which is more likely to occur, 1 or 2? I think this is an answer that doesn't need to be calculated.

But-- there are two other factors that are entangled:

Many Windows users shut down ClearType for various reasons. In this case, Microsoft Yahi will be miserable! But the Mac font is not a good choice, the real winner? You're right, Song style.

Most of the boldface in Mac is blurred in Windows, while Microsoft Yahei is ugly but at least visible in Mac. (indirectly reflects the gap in font rendering technology between the two platforms)

So in practice, a plan that is really close to "foolproof" needs to consider the following points:

Using UA to determine the loading of different font declarations for different platforms

Unless there is a special reason, try to keep the text in Song style, headings and other areas that can be magnified by using Microsoft Yahei (for Windows)

The holly body in Mac works very well, but the font didn't exist before Mac OS X 10.6, so carefully consider your user base, or use the Chinese boldface series to do fallback

Thank you for your reading, the above is the content of "how to use WEB Chinese fonts", after the study of this article, I believe you have a deeper understanding of how to use WEB Chinese fonts, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.