Share a quick solution to garbled characters caused by CSS character encoding

The following editor will bring you an article to share a quick solution to garbled characters caused by CSS character encoding. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor and take a look.

The principle of CSS failure caused by garbled characters:

Since a Chinese character is composed of two characters, the "re" combination of characters will occur when the encoding is inconsistent. , (the combination of the encoded character of half a Chinese character and the following characters generates a new "text") causing the original end to conform to the "mutation", resulting in the end symbol not being found, making the subsequent CSS invalid.

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

Tips 2: Garbled characters appearing in CSS are all It's caused by Chinese characters, so as long as you don't write Chinese, there won't be a situation where "garbled characters cause CSS failure"

Putting aside the above two tips, when we dig deeper, we will find that " Garbled characters usually come from the following two situations.

1. Chinese comments cause garbled characters

CSS comments are: /*certain comments*/

garbled code examples:
Normal code:/*three Chinese characters*/
Caused garbled characters: /*涓夋罽盛?/
Browser environment: IE6
HTML: gb2312
CSS: No encoding specified, the actual parsing is utf-8

In the above example, the garbled code blocks the end character of the CSS comment, so that the subsequent CSS content is within the comment range, resulting in CSS failure.
Preventive measures: Strengthen comments

Example:
Normal code : Garbled characters caused by /****Three Chinese characters****/
: /****Juan 狋罽瀛?***/
This enhanced version of the comment can prevent garbled characters from "mutating" the final end character of the comment, and can be used when writing CSS When doing this, take precautions in advance

2. Chinese fonts cause garbled characters
CSS specified font: font-family:"Chinese font";

Garbled code examples:
Normal code: font-family Garbled characters caused by :"黑体"
: font-family:"翈戋"
Browser environment: IE6
HTML: gb2312
CSS: No encoding specified, the actual parsing is utf-8

In the above example, the font name becomes garbled, causing the specified font to become invalid. The consequences of this problem do not seem to be very serious, but in actual situations, there is indeed a situation where the garbled characters "mute" the following quotation marks, so that the following CSS is within the quotation marks of the font, so that all subsequent CSS becomes invalid.
Precautionary measures: Use font aliases (so browsers can recognize them)

Example:
Normal code: font-family:"SimHei" (font-family:"\9ed1\4f53" )
Browser parsing: font-family: "SimHei" (font-family: "Hei", IE6 is still font-family: "\9ed1\4f53" but the font parsing is displayed as Hei)
Use aliases, Bypassing the use of Chinese, thereby avoiding garbled characters

css Chinese font (font-family) list

Some of Windows:

黑体: SimHei

宋体：SimSun

New Song Dynasty: NSimSun

imitating Song Dynasty: FangSong

楷体: KaiTi

imitating Song Dynasty_GB2312: FangSong_GB2312

楷体_GB2312 ：KaiTi_GB2312

Microsoft YaHei：Microsoft YaHei

Some things that will come out of installing Office:

Official script: LiSu

Youyuan: YouYuan

中文字幕黑：STXihei

中文楷体：STKaiti

中文宋体：STSong

中文中宋体：STZhongsong

中文字幕宋体：STFangsong

Founder ShuTi: FZShuTi

Founder Yaoti: FZYaoti

华文彩云: STCaiyun

中文 Amber: STHupo

华文clerical script: STLiti

华文行楷：STXingkai

华文新伟：STXinwei

Supplement:

After using regular script_GB2312 and imitating Song Dynasty_GB2312, in Windows 7/ The corresponding font may no longer appear in Vista/2008.

This is because Windows 7/Vista/2008 has Kaitai and Fangsong, but by default there is no Kaixi_GB2312 and Fangsong_GB2312, and the font name difference is "_GB2312".

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

How to write Chinese fonts in CSS

Regarding the writing method of fonts, I feel that it needs to be explained:

body,

button, input, select, textarea {

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

}

“\5b8b\4f53″ is “Song Ti”. Use unicode instead of SimSun because some versions of Firefox and Opera do not support the SimSun writing method. Popularize font knowledge:

Aliases of fonts

A font in the system is allowed to have multiple aliases. For example, under Windows, Georgia can also be named Georgia MS. They are actually the same font. The official name of Song Dynasty is SimSun, and " Song Dynasty " is just its nickname.

According to the specification, the browser should be able to automatically recognize the alias of the font and map it to the correct font file. For example, font-famliy: SimSun and font-family: "宋体" should have equivalent effects. Unfortunately, it seems that many browsers cannot correctly implement the previous definition...

Therefore, considering browser compatibility, we need to use "Song Ti", and transcoding into unicode form can ensure that there will be no problem in any encoding. .

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

In order to facilitate quick use by friends who need it, the following table lists the Unicode encodings of some commonly used Chinese fonts:
黑体\9ED1\4F53
宋体\5B8B\4F53
楷体\6977\4F53
Microsoft亚黑\5FAE\8F6F\96C5\9ED1

The above is the detailed content of Share a quick solution to garbled characters caused by CSS character encoding. For more information, please follow other related articles on the PHP Chinese website!