CSS non-ASCII character best practices

Problem Scenario

When writing a style, you often need to use non-ASCII character property values, as follows:

?

1234567891011

.hot_list .sign_discount:before {    content: "满减";    padding: 0 8px;    margin-right: 7px;    font-size: 12px;    line-height: 14px;    color: #fff;    text-align: center;        border-radius: 11px;}

But there are some times when the chrome show is garbled:

In addition to content, font fonts are also frequently required for non-ASCII characters, such as font-family: "Microsoft Jas 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:

?

1234567891011

.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;        border-radius: 11px;}

CSS non-ASCII character best practices