本文翻译自:Placing Unicode character in CSS content value [duplicate]
This question already has an answer here: 这个问题在这里已有答案:
- Adding HTML entities using CSS content 9 answers 使用CSS内容添加HTML实体 9个答案
I have a problem. 我有个问题。 I have found the HTML code for the downwards arrow, ↓
我找到了向下箭头的HTML代码, ↓
(↓) (↓)
Cool. 凉。 Now I need to use it in CSS like so: 现在我需要在CSS中使用它,如下所示:
nav a:hover {content:"&darr";}
That obviously won't work since ↓
这显然不会起作用,因为↓
is an HTML symbol. 是一个HTML符号。 There seems to be less info about these "escaped unicode" symbols that are used in css. 关于css中使用的这些“转义的unicode”符号的信息似乎较少。 There are other symbols like \\2020
that I found but no arrows. 还有其他符号,比如\\2020
,我发现但没有箭头。 What are the arrow codes? 什么是箭头代码?
#1楼
参考:https://stackoom.com/question/hboU/在CSS内容值中放置Unicode字符-重复
#2楼
Why don't you just save/serve the CSS file as UTF-8? 为什么不直接将CSS文件保存/提供为UTF-8?
nav a:hover:after {
content: "↓";
}
If that's not good enough, and you want to keep it all-ASCII: 如果这还不够好,你想保持全部 - ASCII:
nav a:hover:after {
content: "\2193";
}
The general format for a Unicode character inside a string is \\000000
to \\FFFFFF
– a backslash followed by six hexadecimal digits. 字符串中Unicode字符的一般格式是\\000000
到\\FFFFFF
- 反斜杠后跟六个十六进制数字。 You can leave out leading 0
digits when the Unicode character is the last character in the string or when you add a space after the Unicode character. 当Unicode字符是字符串中的最后一个字符或在Unicode字符后添加空格时,可以省略前导0
位数。 See the spec below for full details. 有关详细信息,请参阅下面的规格。
Relevant part of the CSS2 spec : CSS2规范的相关部分 :
Third, backslash escapes allow authors to refer to characters they cannot easily put in a document. 第三,反斜杠转义允许作者引用他们不能轻易放入文档的字符。 In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 ( [ISO10646] ) character with that number, which must not be zero. 在这种情况下,反斜杠后跟最多六个十六进制数字(0..9A..F),它代表带有该数字的ISO 10646( [ISO10646] )字符,该字符不能为零。 (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 be made clear. (在CSS 2.1中未定义如果样式表确实包含Unicode代码点为零的字符会发生什么。)如果[0-9a-fA-F]范围内的字符跟随十六进制数字,则数字的结尾需要要清楚。 There are two ways to do that: 有两种方法可以做到这一点:
- with a space (or other white space character): "\\26 B" ("&B"). 带空格(或其他空白字符):“\\ 26 B”(“&B”)。 In this case, user agents should treat a "CR/LF" pair (U+000D/U+000A) as a single white space character. 在这种情况下,用户代理应将“CR / LF”对(U + 000D / U + 000A)视为单个空格字符。
- by providing exactly 6 hexadecimal digits: "\\000026B" ("&B") 通过提供正好6个十六进制数字:“\\ 000026B”(“&B”)
In fact, these two methods may be combined. 实际上,这两种方法可以结合起来。 Only one white space character is ignored after a hexadecimal escape. 在十六进制转义后,只会忽略一个空格字符。 Note that this means that a "real" space after the escape sequence must be doubled. 请注意,这意味着转义序列之后的“真实”空格必须加倍。
If the number is outside the range allowed by Unicode (eg, "\\110000" is above the maximum 10FFFF allowed in current Unicode), the UA may replace the escape with the "replacement character" (U+FFFD). 如果该数字超出Unicode允许的范围(例如,“\\ 110000”高于当前Unicode允许的最大10FFFF),则UA可以用“替换字符”(U + FFFD)替换该转义。 If the character is to be displayed, the UA should show a visible symbol, such as a "missing character" glyph (cf. 15.2, point 5). 如果要显示该字符,则UA应显示可见符号,例如“缺少字符”字形(参见15.2,第5点)。
- Note: Backslash escapes are always considered to be part of an identifier or a string (ie, "\\7B" is not punctuation, even though "{" is, and "\\32" is allowed at the start of a class name, even though "2" is not). 注意:反斜杠转义符始终被视为标识符或字符串的一部分(即“\\ 7B”不是标点符号,即使“{”是,并且在类名称的开头允许使用“\\ 32”,甚至虽然“2”不是)。
The identifier "te\\st" is exactly the same identifier as "test". 标识符“te \\ st”与“test”完全相同。
Comprehensive list: Unicode Character 'DOWNWARDS ARROW' (U+2193) . 综合列表: Unicode字符'DOWNWARDS ARROW'(U + 2193) 。