Home > Developer > Web Develop
Because a Chinese is two characters, in the case of inconsistent coding will cause the character of the "Re" combination (half of the characters encoded characters and the subsequent combination of characters to generate a new "text") caused the original end of the "mutation", resulting in the end of the symbol can not be found, so that the subsequent CSS will be invalidated.
The trick in 1:css is that the CSS character encoding is inconsistent with the character encoding of the page, so the most straightforward method is to make the character encoding consistent. Specify the CSS encoding type, example: @charset "Utf-8"; (Specifies that the encoding type is utf-8 and must be written in the first line of the CSS file)
Small tricks 2:css appear in the garbled characters are caused by Chinese characters, so as long as not to write English, will not produce "garbled caused by CSS failure" this situation
Apart from the above two tips, we are planing root, we will find that "garbled" usually comes from the following two situations.
First, Chinese comments caused garbled
CSS comments are:/* some comments */
Garbled instances:
Normal code:/* Three kanji */
Caused by garbled:/* Juan Corporation 眽 Ying?
Browser Environment: IE6
html:gb2312
CSS: No coding is specified, the actual parsing is utf-8.
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "gb2312" /> <styletype= "Text/css">P{/*three kanji*/Color:#f00;} </style></Head><Body><P>Test</P></Body></HTML>
IE7 view the source file.
In IE6 the following versions of the text color did not change.
The above example is garbled block the CSS comment Terminator, so that the back of the CSS content within the annotation range, resulting in the failure of CSS
Precautionary measures: strengthening annotations
Example:
Normal code:/**** three Kanji ****/
Caused by garbled:/**** Juan Corporation 眽 Ying? ***/
This enhanced version of the comments can prevent garbled the final end of the note "mutation", you can write CSS in advance to prevent.
Second, the Chinese font caused garbled
CSS specified font: font-family: "Chinese font";
Garbled instances:
Normal code: font-family: "Blackbody"
Caused by garbled: font-family: "Hazel Contact 綋"
Browser Environment: IE6
html:gb2312
CSS: No encoding specified, actually resolves to utf-8
<!DOCTYPE HTML><HTML><Head> <MetaCharSet= "gb2312" /> <styletype= "Text/css">P{/*three kanji*/Color:#f00;font-family:"Blackbody"} </style></Head><Body><P>Test</P></Body></HTML>
source file
The example is garbled to make the font name garbled, causing the specified font to become invalid. The consequences of this problem do not seem very serious, but in fact, there is a garbled in the back of the quotation mark "mutation" situation, so that the back of the CSS are in the font of the quotation marks, so that the following CSS all invalid.
Precautions: Use a font alias (so the browser is recognized)
Example:
Normal code: font-family: "Simhei" (font-family: "\9ed1\4f53")
Browser parsing: font-family: "Simhei" (font-family: "Blackbody", IE6 still font-family: "\9ed1\4f53" but font resolution is shown in bold)
uses aliases, bypassing the use of Chinese, thus avoiding garbled characters
CSS Chinese font (font-family) list
Some of Windows:
blackbody: Simhei
Arial: SimSun
New Arial: Nsimsun
Imitation: Fangsong
Italic: Kaiti
Imitation _gb2312:fangsong_gb2312
Italic _gb2312:kaiti_gb2312
Microsoft Elegance blackbody: Microsoft Yahei
Some of the things that can be produced by office:
Official script: Lisu
Young Circle: Youyuan
Chinese fine Black: Stxihei
Chinese Italic: Stkaiti
XXFarEastFont-Arial: Stsong
XXFarEastFont-Sung: Stzhongsong
XXFarEastFont-Imitation: Stfangsong
Founder Shu Body: Fzshuti
Founder Arial: Fzyaoti
Chinese Choi Wan: Stcaiyun
Chinese Amber: Sthupo
Chinese script: Stliti
XXFarEastFont-Xingkai: Stxingkai
Chinese New Wei: Stxinwei
Add:
After you use italics _gb2312, imitation _gb2312, the corresponding font may no longer appear in Windows 7/vista/2008.
This is because there are italics, imitation in Windows 7/vista/2008, there is no italic _gb2312, imitation _gb2312 by default, and the font name differs from "_gb2312".
-----------------------------------------------------------
The wording of Chinese fonts in CSS
For the wording of the font, feel the need to explain:
{font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", Sans-serif;}"\5b8b\4f53″" is "Song Body". In Unicode, it is not necessary to SimSun because some versions of Firefox and Opera do not support the SimSun notation.
Learn more about Font literacy:
Aliases for fonts
A font in the system is allowed to exist in multiple alias forms. For example, under Windows, Georgia can also be named with Georgia MS, which is actually the same font. The official name of the song body is SimSun, and the "song Body" is just its nickname.
By specification, 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: "Song body" should have an equivalent effect. Unfortunately, it seems that many browsers do not correctly execute the previous definition ...
Therefore, in view of browser compatibility, we need to use "Arial", transcoding into Unicode form can guarantee that there is no problem under any coding.
-----------------------------------------------------------
To make it easy for your friends to use quickly, the following table lists some of the Unicode encodings for commonly used Chinese fonts:
Blackbody \9ed1\4f53
Song Body \5b8b\4f53
Italic \6977\4f53
Microsoft ya Black \5fae\8f6f\96c5\9ed1
Garbled due to the CSS failure principle, solving skills.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
