Garbled characters caused by CSS character encoding

CSS failure caused by garbled characters:
Because a Chinese character is composed of two characters, if the encoding is inconsistent, it will lead to a "re-" combination of characters, (a new "text" is generated when the encoding character of the half Chinese character is combined with the subsequent character). This causes the original end to conform to the "variant", and thus the end symbol cannot be found, the subsequent CSS will become invalid.

Tip 1: Garbled characters in CSS are caused by inconsistent CSS character encoding with the character encoding on the page. Therefore, the most direct method is to make the character encoding consistent. Specify the CSS encoding type, for example, @ charset "UTF-8"; (specify the encoding type as UTF-8, which must be written in the first line of the CSS file)
Tip 2: Garbled characters in CSS are caused by Chinese characters. Therefore, as long as you do not write Chinese characters, "garbled characters will not cause CSS to fail ".

Based on the above two tips, we will find that "garbled" usually comes from the following two situations.
I. garbled characters caused by Chinese comments
CSS comments:/* Some comments */
Garbled instance:
Normal code:/* Three Chinese characters */
The cause of Garbled text:/* Is it a small mess? /
Browser environment: IE6
HTML: gb2312
CSS: No encoding is specified, and the actual Parsing is UTF-8

In the above example, the ending character of CSS comments is blocked by garbled characters, so that the CSS content is within the scope of the comments, leading to the failure of CSS.
Preventive Measure: Strengthen comments
Example:
Normal code:/***** three Chinese characters ****/
The Garbled text:/***** is a small mess? ***/
This enhanced version of the annotation can prevent the final end character of the annotation from being "mutating" by garbled characters. It can be prevented in advance when writing CSS.

2. garbled characters caused by Chinese Fonts
CSS: font-family: "Chinese font ";
Garbled instance:
Normal code: font-family: ""
Garbled: font-family: "Too many characters"
Browser environment: IE6
HTML: gb2312
CSS: No encoding is specified, and the actual Parsing is UTF-8

In the preceding example, the font name is garbled, causing the specified font to become invalid. The consequence of this problem does not seem to be very serious, but in reality, there is a situation where garbled characters "mutates" the quotation marks behind it, so that the CSS behind it is in the quotation marks of the font, as a result, all the subsequent CSS becomes invalid.
Preventive Measure: Use the font alias (so the browser can recognize it)
Example:
Normal code: font-family: "simhei" (font-family: "\ 9ed1 \ 4f53 ")
Browser resolution: font-family: "simhei" (font-family: "", IE6 is still font-family: "\ 9ed1 \ 4f53", but the font resolution is shown as)
Using aliases bypasses Chinese characters to avoid garbled characters

CSS Chinese font-family list

Windows:

Simhei

Simsun

New: nsimsun

Imitation Song: fangsong

Kaiti

Imitation Song _ gb2312: fangsong_gb2312

_ Gb2312: kaiti_gb2312

Microsoft yahei

Some Office installation will generate:

Statement: Lisu

Youyuan

文: stxihei

文: stkaiti

文: stsong

文中: stzhongsong

文: stfangsong

Founder Shu-I: fzshuti

Founder Yao Ti: fzyaoti

文 cloud: stcaiyun

文 AMBER: sthupo

文: stliti

文: stxingkai

New Chinese Wei: stxinwei

Supplement:

After the _ _gb2312 and _gb2312 are used, the corresponding font may not be displayed in Windows 7/Vista/2008.

This is because in Windows 7, Vista, and 2008, there are two types of fonts, namely _ gb2312 and _ gb2312 by default. The font name is different from "_ gb2312 ".

-----------------------------------------------------------

How to write Chinese fonts in CSS

I think it is necessary to describe the font writing:

Body,

Button, input, select, textarea {

Font: 12px/1 tahoma, Helvetica, Arial, "\ 5b8b \ 4f53", sans-serif;

}

"\ 5b8b \ 4f53" is "". Simsun is not required in Unicode because some versions of Firefox and opera do not support simsun writing. Popular font knowledge:

Font alias

A font in the system allows multiple aliases. For example, in windows, Georgia can also be named by Georgia MS, which is actually the same font. The official name of is simsun, while "sun" is only its alias.

According to the specifications, the browser should be able to automatically identify the font alias and map it to the correct font file. For example, font-famliy: simsun and font-family: "" should have an equivalent effect. Unfortunately, it seems that many browsers cannot correctly execute the previous definition ......

Therefore, considering browser compatibility, we need to use "". transcoding to Unicode can ensure that there is no problem in any encoding.

-----------------------------------------------------------

In order to facilitate the quick use of users, the following table lists some Unicode codes for commonly used Chinese fonts:
Simhei \ 9ed1 \ 4f53
\ 5b8b \ 4f53
\ 6977 \ 4f53
5\ 5fae \ 8f6f \ 96c5 \ 9ed1