[Tutorial] about the font application in web design (3) Practical application

Hello, everybody. It's me again ~

You have read the font set and some basic issues that need attention, as well as the general font family.ArticleThen, you should have a basic understanding of the font. Now let's start to apply this knowledge to practice!

-Explanation of font-family in the Specification

We define the following font table:

Font-family: "Comic Sans MS", "", "", sans-serif;

According to W3C specifications, browsers should first look for Comic Sans MS fonts when using this font-family to display a character. If the Comic Sans MS font is not found, search for the next font in sequence, that is, the young font. If you find the Comic Sans MS font, the browser looks for it in the Comic Sans MS font. If you find this character, use the Comic Sans MS font to display it. If this character is not found, or it corresponds to a missing character (the missing character is a special character in the font file, used to indicate that this character is not found in the font file. Usually it is to display a square), then it is necessary to go to the next font, that is, to continue searching for this character in the Child circle. The entire font table is searched so far. If this character cannot be found in the general font, that is, the Sans-serif font, the browser should display the missing characters in the font.

Therefore, if you have the following sentence:

So I said, "It ain't going nowhere.".

Then, in a normal Windows XP system, all Chinese characters will be displayed as a child circle, English characters are displayed as Comic Sans MS font. For example, "say" word, the browser first search Comic Sans MS font, get a missing character, so search for the Child circle. The system contains the child circle font, so the search is terminated and the word "say" is displayed as the Child circle font. For the English character "I", the browser can find this character in the Comic Sans MS, so it displays the character "I" with the Comic Sans MS.

In addition, double quotes -- "", these two characters are also in the Comic Sans MS. So the browser will use double quotes in the Comic Sans MS to display.

-Actually?

Let's take a look:

Internet Explorer 7

Firefox 2

Opera 9

Safari 3.1 windows

...... It looks like a browser.

How can this be done?

 

Take a closer look. In fact, Firefox and Safari are still quite reliable. In this example, they are all correctly displayed. Neither ie nor opera can display Chinese characters in the correct font. Because in Comic Sans MS search failure, should search for the young circle font. However, I do not know why IE and opera did not search for the next font in sequence, or even did not search for the simhei and sans-serif, but directly jumped to the default font of the system, it is the default font of the system, because I have set sans-serif to in opera. If Opera still has a conscience to search for SANs-serif, it should still use to display Chinese characters. And somehow, Comic Sans MS clearly exists in the double quotes, also failed to get the correct display in opera. What is the perfect CSS browser?

IE 7 is at least better. At least double quotation marks that are directly connected to English characters are recognized. But in addition, it is also a complete defeat.

In addition, we should not consider safari as a good guy-some versions of Safari 3 for Windows simply show the missing characters in the font when they cannot find Chinese characters in the first font, all Chinese web pages have become full-screen web pages, which cannot be read by this person or many other people who have found this bug and have repeatedly negotiated with Apple, they finally fixed the bug.

Firefox is not perfect because Firefox does not support font aliases. Therefore, you can only write "", and you can only write "", instead of using their official font names in the system-youyuan and simhei.

I don't even know why the browser produces so many strange rendering operations. I guess I only want to ask the developers of these browsers.

-Solution

Because mainstream browsers cannot be unified in Chinese display, the solution to the above problem can only be a compromise and compromise. As for how to compromise, it depends on whether you want to ensure the Display Effect of English characters or Chinese characters.

 

If you want to ensure the Display Effect of Chinese characters, you must put the Chinese font you want to display first in the definition of family-font.For example, you can write the style definition in the above example as follows:

Font-family: "", "Comic Sans MS", sans-serif;

This ensures that all Chinese characters are displayed as child circles. Why do IE and opera recognize the child circle at the top of font-family?

The disadvantages of doing so are also obvious. Generally, Chinese fonts contain English characters, such as the Child circle above. Therefore, English characters on the webpage are displayed with these Chinese fonts preferentially. English characters in Chinese fonts are usually not very nice. For example, the English characters in the circle are exactly the same as those in the Z circle. The Chinese characters in the circle are not properly tuned. ThereforeThe Chinese and English documents are very ugly.. Unfortunately, there are still a lot of mixed Chinese and English rankings on webpages, such as user names, date and time, and URLs. English numbers are always indispensable ......

In addition, this solution alsoCannot fundamentally solve the browser's defects in supporting Chinese Characters. For example, some people like the effects of italics very much, so they want to use to display your webpage, but considering that only Windows Vista has the font, so he planned to display text in a black-free computer with a black body, so he wrote such a style rule:

Font-family: "", "", sans-serif;

However, in actual tests, he will find that even if the first font is set to a Chinese font, ie and opera will not use the second font when the font is missing, and continue with their own inexplicable rules, using the default system font-. This obviously cannot meet the original intention of setting the font-family attribute.

 

The second solution is,The font-family is still written in accordance with the CSS standard interpretation method, but some hands and feet on the font-size, only 12 PX, 14px, 16 PX and other steady font size. The biggest benefit of doing so isGive priority to displaying English characters in the most appropriate font. As for Chinese characters, XP's, Vista's, and OS's new, the font sizes shown above are not ugly. What's more, the selection range of Chinese fonts is relatively small, which is nothing more than the default fonts of those systems, so it is natural to make up. Individuals prefer to use this solution.

 

You need to determine the specific solution based on your actual situation.

 

Let's talk about it today. Next time, I will explain how to apply fonts in terms of cross-platform compatibility ~

So, next time you will see it ~