Тик-символ в HTML/XHTML

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

Должен работать начиная с 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.

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

Ответ 3

Клиентский компьютер нуждается в правильном шрифте, который имеет глиф для этого символа для его отображения. Но 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.

Ответ 4

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

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

или в css:

content: "\f00c";
font-family: FontAwesome;

Ответ 5

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

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

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

Ответ 6

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

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

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

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

Ответ 7

хотя кодирует кодировку браузера в 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 не имеет этого).

Также это довольно неприятный хак - этот персонаж во всех смыслах и целях "ü" и будет казаться таким способом, как поисковые системы, или если текст скопирован и вставлен. Правильные кодовые точки Юникода - это путь, если у вас нет альтернативы.

Проблема заключается в том, что ни один шрифт в комплекте с Windows не поставляет U + 2713 CHECK MARK ('✓). Единственное, что вы, вероятно, найдете на машине Windows, это "Arial Unicode MS", на которую нельзя положиться. Поэтому, в конце концов, я думаю, вам придется либо:

  • используйте другой символ, который лучше поддерживается (например,. ● - bullet, как используется SO), или
  • используйте изображение, а '✓ - как текст alt.

Ответ 8

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

Ответ 9

Будет ли символ √ (символ квадратного корня, & # 8730;)?

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

Ответ 10

.className {
   content: '\&#x2713';
}

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

Ответ 11

Решение с использованием Wingdings, которое не основано на Unicode и не работает в Linux без установленных Wingdings.

Crossed Checkbox
<div style="font-family: Wingdings;">û</div> ☒

Checked Checkbox
<div style="font-family: Wingdings;">ü</div> ☑

Cross
<div style="font-family: Wingdings;">ý</div> ✗

Check
<div style="font-family: Wingdings;">þ</div> ✓

Ответ 12

вы можете использовать & oplus; или & otimes;