2012-05-01 8 views
238

У меня проблема. Я нашел код HTML для стрелки вниз, ↓ (↓)Размещение символа Юникода в значении содержимого CSS

Прохладный. Теперь мне нужно, чтобы использовать его в CSS так:

nav a:hover {content:"&darr";} 

Это, очевидно, не будет работать, так как ↓ является символом HTML. Кажется, что меньше информации об этих символах «escaped unicode», которые используются в css. Существуют и другие символы, такие как \2020, которые я нашел, но не стрелки. Что такое коды стрелок?

+10

Вам нужно ': before' или': after' для контента для работы – Musa

+2

Простой поиск Google показал http://www.blooberry.com/indexdot/html/tagpages/entities/arrow.htm список Юникод точек для многих стрелок. – Phrogz

+1

@Phrogz К сожалению, этот сайт не содержит «/» в юникоде, поэтому, как правило, я бы понятия не имел, что мне нужно добавить «/» в код, чтобы он работал в css. Теперь я знаю, что мне придется добавить «/», чтобы он работал. – davecave

ответ

370

Почему бы вам просто не сохранить или обслуживать файл CSS как UTF-8?

nav a:hover:after { 
    content: "↓"; 
} 

Если это не достаточно хорошо, и вы хотите, чтобы держать это все-ASCII:

nav a:hover:after { 
    content: "\2193"; 
} 

Общий формат для символа Unicode внутри строки является \000000 к \FFFFFF - обратную косую черту, за которой следует шесть шестнадцатеричные цифры. Вы можете оставить цифры 0, когда символ Юникода является последним символом в строке или при добавлении пробела после символа Юникода. Подробную информацию см. В спецификации ниже.


Relevant part of the CSS2 spec:

В-третьих, обратный слэш ускользает позволяют авторам ссылаться на символы, они не могут легко положить в документе. В этом случае обратная косая черта сопровождается не более шести шестнадцатеричных цифр (0..9A..F), которые обозначают символ ISO 10646 ([ISO10646]) с таким числом, которое не должно быть равно нулю. (В CSS 2.1 не определено, что произойдет, если в таблице стилей содержится символ с нулевым кодом Unicode.) Если символ в диапазоне [0-9a-fA-F] следует шестнадцатеричному числу, конец номера должны быть четко сформулированы. Есть два способа сделать это:

  1. с пространством (или другим белым символом пробела): "\ 26 B" ("& B"). В этом случае пользовательские агенты должны обрабатывать пару «CR/LF» (U + 000D/U + 000A) как один символ пробела.
  2. , предоставляя ровно 6 шестнадцатеричных цифр: "\ 000026B" ("& Б")

В самом деле, эти два метода могут быть объединены. После шестнадцатеричного escape-кода игнорируется только один символ пробела. Обратите внимание, что это означает, что «реальное» пространство после escape-последовательности должно быть удвоено.

Если номер находится за пределами допустимого Unicode диапазона (например, «\ 110000» превышает максимально допустимый 10FFFF в текущем Юникоде), UA может заменить escape «заменяющим символом» (U + FFFD). Если символ должен отображаться, UA должен отображать видимый символ, например глиф «пропавшего персонажа» (см. 15.2,, пункт 5).

  • Примечание: восьмеричные всегда считается частью identifier или строки (т.е. «\ 7B» не является пунктуации, хотя «{» есть, а «\ 32» допускается в начале названия класса, хотя «2» не является).
    Идентификатор «te \ st» - это точно такой же идентификатор, что и «test».

Всестороннее список: Unicode Character 'DOWNWARDS ARROW' (U+2193).

+19

Вот еще один список стрелок: http://unicode-table.com/en/sets/arrows-symbols/ Используйте код «U +», но замените «U +» на «\». например «U + 25C0» становится «content:» \ 25C0 »;' – Luke

+5

Этот [Калькулятор конверсии сущностей] (http://www.evotech.net/articles/testjsentities.html) может быть удобен. – stove

+5

Одна деталь, чтобы добавить пробел после экранированного символа, вам нужно добавить два пробела '\ 2193␣␣ '. Это связано с тем, что первое пространство используется парсером CSS. Это так, если число Unicode равно 5 или менее символов. –

Смежные вопросы