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

This article introduces you how to quickly solve the problem of garbled code caused by CSS character coding, the content is very detailed, interested friends can refer to, hope to be helpful to you.

Principle of CSS failure caused by garbled codes:

Because a Chinese is composed of two characters, it will cause a "re-combination" of characters in the case of inconsistent coding, (the coded characters of half a Chinese character and the following character combination to generate a new "text") cause the original end to conform to the "mutation", resulting in the end symbol can not be found, so that the following CSS will be invalid.

The garbled code in 1:CSS is caused by the inconsistency between the CSS character encoding and the page's character encoding, so the most direct way is to make the character encoding consistent. Specify the encoding type of CSS, for example: @ charset "utf-8"; (specify the encoding type of utf-8, which must be written on the first line of the CSS file)

The garbled codes in Tip 2:CSS are all caused by Chinese characters, so as long as you don't write Chinese, there will be no such situation as "garbled codes cause CSS failure".

Putting aside the above two tips, when we dig down the roots, we will find that "garbled" usually comes from the following two situations.

I. garbled codes caused by Chinese comments

The CSS notes are: / * some comments * /

Examples of garbled codes:

Normal code: / * three Chinese characters * /

The garbled code caused by it: / * trickle down.

Browser environment: IE6

HTML:gb2312

CSS: no encoding is specified, and it is actually resolved to utf-8

In the above example, the garbled code blocks the Terminator of the CSS comment, making the following CSS content within the scope of the comment, resulting in the invalidation of the CSS.

Preventive measures: strengthen the notes

Example:

Normal code: / * three Chinese characters * /

The garbled code caused: / * /

This enhanced version of comments can prevent garbled code from "mutating" the final Terminator of comments, which can be prevented in advance when writing CSS.

2. Garbled codes caused by Chinese fonts

CSS specified font: font-family: "Chinese font"

Examples of garbled codes:

Normal code: font-family: boldface

Garbled code caused: font-family: "Hazelnut"

Browser environment: IE6

HTML:gb2312

CSS: no encoding is specified, and it is actually resolved to utf-8

In the above example, the garbled font name becomes garbled, resulting in the invalidation of the specified font. The consequence of this problem does not seem to be very serious, but in fact, there is a situation in which the quotation marks after the garbled code are "mutated", so that the subsequent CSS is in the quotation marks of the font, thus all the subsequent CSS is invalid.

Precaution: use aliases for fonts (so browsers can recognize them)

Example:

Normal code: font-family: "SimHei" (font-family: "\ 9ed1\ 4f53")

Browser parsing: font-family: "SimHei" (font-family: "boldface", IE6 is still font-family: "\ 9ed1\ 4f53" but font parsing is shown in boldface)

Use aliases to avoid using Chinese so as to avoid garbled codes

Css Chinese Font (font-family) list

Some of Windows:

Boldface: SimHei

Arial style: SimSun

New Song style: NSimSun

Song Fang: FangSong

Italics: KaiTi

Imitating Song _ GB2312:FangSong_GB2312

Italics _ GB2312:KaiTi_GB2312

Microsoft yakuza: Microsoft YaHei

Some of the things that will come out of installing Office:

Official script: LiSu

Young circle: YouYuan

Chinese Fine Black: STXihei

Chinese italics: STKaiti

Chinese Arial: STSong

Song: STZhongsong in Chinese

Chinese imitation of Song Dynasty: STFangsong

Founder Shu body: FZShuTi

Fang Zheng Yao: FZYaoti

Chinese Caiyun: STCaiyun

Chinese Amber: STHupo

Chinese official script: STLiti

Chinese Xing Kai: STXingkai

Chinese New Wei: STXinwei

Add:

After using italics _ GB2312 and imitating Song _ GB2312, it may no longer appear as the corresponding font in Windows 7/Vista/2008.

This is because there are italics and imitations of Song in Windows 7/Vista/2008. By default, there are no italics _ GB2312 and imitation of Song _ GB2312. The font name differs from "_ GB2312".

The Writing of Chinese Font in CSS

For the way the font is written, I think it needs to be explained:

Body

Button, input, select, textarea {

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

}

"\ 5b8b\ 4f53" means "Song style". It is indicated by unicode that you do not need SimSun because some versions of Firefox and Opera do not support the writing of SimSun. Popularize font knowledge:

An alias for the font

A font in the system allows multiple aliases to exist. For example, under Windows, Georgia can also be named after Georgia MS, but they are actually the same font. The official name of Song style is SimSun, and Song style is just another name for it.

According to the specification, the browser should automatically recognize the alias of the font and map it to the correct font file. For example, font-famliy: SimSun and font-family: "Song style" should have equivalent effects. Unfortunately, it seems that many browsers can't execute the previous definition correctly.

Therefore, in order to consider browser compatibility, we need to use "Song style", transcoding to unicode form can ensure that there is no problem under any coding.

To facilitate quick use by friends who need it, the following table lists the Unicode codes of some commonly used Chinese fonts:

Boldface\ 9ED1\ 4F53

Arial\ 5B8B\ 4F53

Italics\ 6977\ 4F53

Microsoft Yahi\ 5FAE\ 8F6F\ 96C5\ 9ED1

On how to quickly solve the problem of garbled code caused by CSS character coding is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.