Zhanhailiang Date: 2014-10-30
Problem Scenario
The property values for non-ASCII characters are often required for writing styles, such as the following:
. Hot_list . Sign_discount: Before{ content: "Full minus"; padding: 0 8px; Margin-right: 7px; font-size: 12px; Line-height: 14px; Color: #fff; text-align: Center; Background-color: #f13993; Border-radius: 11px;}
However, there are some times when the chrome display is garbled:
In addition to content, font fonts are also values that are often required for non-ASCII characters. such as font-family: "Microsoft Ya Black"
Best practices
To avoid this type of coding problem, CSS recommends that you use backslash escaping when dealing with non-ASCII characters to avoid coding problems:
Backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash are followed by at most six hexadecimal digits (0..9A). F), which stand for the ISO 10646 ([ISO10646]) character with that number, which must is zero. (It is undefined in CSS 2.1 What happens if a style sheet does contain a character with Unicode Codepoint Zero.) If a character in the range [0-9a-fa-f] follows the hexadecimal number, the end of the number needs to is made clear.
For details, see: Http://www.w3.org/TR/CSS2/syndata.html#escaped-characters
So the above example can be changed to:
. Hot_list . Sign_discount: Before{ content: "\6ee1\51cf"; padding: 0 8px; Margin-right: 7px; font-size: 12px; Line-height: 14px; Color: #fff; text-align: Center; Background-color: #f13993; Border-radius: 11px;}
CSS non-ASCII character best practices