Символ галочки в HTML / XHTML - PullRequest
Новая
       53

Символ галочки в HTML / XHTML

268 голосов
/ 18 марта 2009

Нам необходимо отобразить тиковый символ (✓ или ✔) во внутреннем веб-приложении, и в идеале мы хотели бы избегать использования изображения.

Должен работать, начиная с IE 6.0.2900, на компьютере с XP, в идеале нам нужно, чтобы он был кросс-браузерным (IE + последние версии FF).

Следующие поля отображают, хотя устанавливает кодировку браузера в UTF-8 (META работает хорошо, а не проблема). По умолчанию используется шрифт Times New Roman (может быть проблема, но попытка Lucida Sans Unicode не помогает, и у меня не установлены ни Arial Unicode MS, ни Lucida Grande). 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
 &#10003; &#10004;
</body>
</html>

Любая помощь приветствуется.

В IE 6.0 и IE 7 работает следующее: 

<html>
<head>

</head>
<body>
 <span style="font-family: wingdings; font-size: 200%;">&#252;</span>
</body>
</html>

Буду признателен, если кто-нибудь сможет проверить в FF в Windows. Я почти уверен, что он не будет работать на Windows-принтере.

Ответы [ 13 ]

447 голосов
/ 18 марта 2009

Я думаю, что вы используете менее поддерживаемые значения Юникода, которые не всегда имеют глифы для всех кодовых точек.
Попробуйте следующие символы:

  • ☐ ( 0x2610 в шестнадцатеричном формате Юникода [десятичное HTML: &#9744;]): пустой (не отмеченный) флажок
  • ☑ ( 0x2611 [десятичное HTML: &#9745;]): проверенная версия предыдущего флажка
  • ✓ ( 0x2713 [Десятичный HTML: &#10003;])
  • ✔ ( 0x2714 [Десятичный HTML: &#10004;])

Редактировать: Кажется, здесь есть некоторая путаница с первым символом, ☐ / 0x2610. Это пустой (не отмеченный) флажок, поэтому, если вы видите поле, оно должно выглядеть так. Это аналог ☑ / 0x2611, который является проверенной версией.

254 голосов
/ 18 августа 2013

Прежде всего, вы должны понимать, что вам на самом деле не нужно использовать сущности HTML - если кодировка вашего HTML-документа объявлена ​​правильно как UTF-8, вы можете просто скопировать / вставить эти символы в ваш файл / сервер. боковой скрипт / JavaScript / что угодно.

Сказав это, вот полный список всех соответствующих символов UTF-8 / объектов HTML , относящихся к этой теме:

  • ☐ (hex: &#x2610; / dec: &#9744;): урна для голосования (пустая, так и должно быть)
  • ☑ (гекс: &#x2611; / dec: &#9745;): урна с чеком
  • ☒ (гекс: &#x2612; / dec: &#9746;): урна с x
  • ✓ (hex: &#x2713; / dec: &#10003;): флажок, эквивалентный &checkmark; и &check; в в большинстве браузеров
  • ✔ (гекс: &#x2714; / dec: &#10004;): тяжелая галочка
  • ✗ (гекс: &#x2717; / dec: &#10007;): бюллетень x
  • ✘ (гекс: &#x2718; / dec: &#10008;): тяжелое голосование x
  • ? (⚠ шестнадцатеричное: &#x1F5F8; / dec &#128504;): легкая галочка (плохо поддерживается на 2017 год)
  • ✅ (шестнадцатеричное:: &#x2705; / dec: &#9989;): белая тяжелая галочка (смешанная поддержка по состоянию на 2017 год)
  • ? (⚠ hex: &#x1F5F4; / dec: &#128500;): сценарий голосования X (плохо поддерживается на 2017 г.)
  • ? (⚠ hex: &#x1F5F6; / dec: &#128502;): сценарий голосования, выделенный жирным шрифтом X (плохо поддерживается на 2017 г.)
  • ⮽ (⚠ шестнадцатеричное: &#x2BBD; / dec: &#11197;): урна с подсветкой X (плохо поддерживается на 2017 год)
  • ? (⚠ hex: &#x1F5F5; / dec: &#128501;): урна со скриптом X (плохо поддерживается на 2017 год)
  • ? (⚠ hex: &#x1F5F9; / dec: &#128505;): урна для голосования с жирным шрифтом (плохо поддерживается на 2017 год)
  • ? (⚠ hex: &#x1F5F7; / dec: &#128503;): урна с жирным шрифтом X (плохо поддерживается на 2017 год)

Проверять веб-шрифты на наличие тиковых символов? Вот готовый пример использования для более распространенных примеров: A☐B☑C☒D✓E✔F✗G✘H - просто скопируйте / вставьте его в текстовое поле примера поставщика своего веб-шрифта и посмотрите, какие шрифты поддерживают какие символы галочек.

17 голосов
/ 18 марта 2009

Клиентскому компьютеру необходим правильный шрифт с глифом для отображения этого символа. Но Times New Roman этого не делает. Попробуйте Arial Unicode MS или Lucida Grande вместо: 

<span style="font-family: Arial Unicode MS, Lucida Grande">
    &#10003; &#10004;
</span>

Это работает для меня в Windows XP в IE 5.5, IE 6.0, FF 3.0.6.

13 голосов
/ 12 июня 2014

Я обычно использую шрифт Fontawesome (http://fontawesome.io/icon/check/),, вы можете использовать его в HTML-файлах: 

 <i class="fa fa-check"></i>

или в формате css: 

content: "\f00c";
font-family: FontAwesome;
11 голосов
/ 18 марта 2009

Почему вы не используете элемент флажка ввода HTML в режиме только для чтения 

<input type="checkbox" disabled="disabled" /> and
<input type="checkbox" checked="checked" disabled="disabled" />

Я предполагаю, что это будет работать во всех браузерах.

10 голосов
/ 28 сентября 2013

Я столкнулся с той же проблемой, и ни одно из предложений не сработало (Firefox на Windows XP).

Итак, я нашел возможный обходной путь с использованием данных изображения для отображения небольшой галочки: 

span:before {
    content:url("data:image/gif;base64,R0lGODlhCgAKAJEAAAAAAP///////wAAACH5BAEAAAIALAAAAAAKAAoAAAISlG8AeMq5nnsiSlsjzmpzmj0FADs=");
}

Конечно, вы можете создать собственное изображение с галочкой и использовать конвертер для добавления его в качестве данных: image / gif. Надеюсь, это поможет.

8 голосов
/ 23 мая 2013

Приехав очень поздно на вечеринку, я обнаружил, что &check; (& check;) работает в Opera. Я не тестировал его ни в каких других браузерах, но он может быть полезен для некоторых людей.

8 голосов
/ 18 марта 2009

, хотя устанавливает кодировку браузера в UTF-8

(Если вы используете числовые ссылки на символы, разумеется, не имеет значения, какая кодировка используется, браузеры получат правильный код Unicode непосредственно из числа.) 

<span style="font-family: wingdings; font-size: 200%;">&#252;</span>

Буду признателен, если кто-нибудь сможет проверить в FF в Windows. Я почти уверен, что он не будет работать на Windows-принтере.

Сбой для меня в Firefox 3, Opera и Safari. Любопытно, что работает в другом браузере Webkit, Chrome. Также не работает в Linux (очевидно, поскольку Wingdings там не установлен; он установлен на Mac, но это не поможет, если в Safari его нет).

Кроме того, это довольно неприятный хак - этот символ во всех смыслах и целях «ü» и будет отображаться таким образом, как поисковые системы, или если текст копируется и вставляется. Правильные коды Unicode - это путь, если у вас нет альтернативы.

Проблема в том, что ни один шрифт, поставляемый с Windows, не поставляет U + 2713 CHECK MARK (‘✓’). Единственное, что вы, скорее всего, найдете на компьютере с Windows, - это «Arial Unicode MS», на который не следует полагаться. Так что, в конце концов, я думаю, вам придется либо:

  • использовать другой символ, который лучше поддерживается (например, ‘●’ - bullet , как используется SO), или
  • использовать изображение с ‘✓’ в качестве альтернативного текста.
5 голосов
/ 25 сентября 2013 
.className {
   content: '\&#x2713';
}

Используя свойство CSS content, вы можете показывать галочку с изображением или другим кодовым знаком.

4 голосов
/ 18 марта 2009

Достаточно ли √ (квадратный корень, √)?

В качестве альтернативы, убедитесь, что вы установили заголовок Content-Type: до отправки данных в браузер Простого указания тега типа содержимого <meta> может быть недостаточно, чтобы побудить браузеры использовать правильный набор символов.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...