Позначте символ у HTML / XHTML

279

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

Доводиться працювати починаючи з 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.

html  xhtml 
— Влад Гудім
джерело
1
Як повинен виглядати символ галочки?
— Джон Фемінелла
— Сем Хаслер
2
Сем, поглянь на питання.
— Влад Гудим
@Totophil, я знаю, що це говорить про ті самі сутності, але він також пропонує, щоб сервер надсилав фактичний HTTP-заголовок Content-Type: text / html; charset = utf-8, а також проблема, яка може не містити використовуваний шрифт. гліфи для використаних символів.
— Сем Хаслер
Ось пара: amp-what.com/#q=check%20mark & # x2713 & # x2714
— ndp

Відповіді:

454

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

Редагувати: Здається, тут є деяка плутанина щодо першого символу ☐ / 0x2610. Це порожній (не відмічений) прапорець, тож якщо ви бачите поле, це саме так, як він повинен виглядати. Це аналог ☑ / 0x2611, що є перевіреною версією.

— Джон Фемінелла
джерело
1
Корпоративна установка: Win XP Professional + IE 6.0.2900.2180.xpsp_sp2_qfe.070227-2300
— Влад Гудим
Перший - це ящик, решта добре працюють. Хоча я б замість цього використовував зображення, просто щоб бути впевненим.
— mbillard
6
Щоб було зрозуміло, перше зображення повинно бути полем - це порожній прапорець!
— Джон Фемінелла
1
@Totophil: Ага, гаразд. Я використовую Ubuntu, і шрифт sans за замовчуванням, який я налаштував у FF, має ці гліфи. У Windows просто використовуйте карту символів, щоб шукати ці гліфи і перевірити, чи є у них потрібний шрифт. Якщо ні, то вам потрібно вибрати інший.
— Джон Фемінелла
5
Десятковий код порожнього поля: 0x2610 -> 9744. так що HTML-код буде виглядати так &#9744;само як для встановленого прапорця: 0x2611 -> 9745 та HTML-код&#9745;
— Vikas
272

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

Сказавши це, ось вичерпний перелік усіх відповідних символів / HTML-об’єктів UTF-8, пов’язаних із цією темою:

  • ☐ (hex: &#x2610;/ dec:): &#9744;виборча скринька (порожня, саме так і має бути)
  • ☑ (hex: &#x2611;/ dec:) &#9745;: урна з чеком
  • ☒ (hex: &#x2612;/ dec:) &#9746;: урна з x
  • ✓ (шістнадцятковий: &#x2713;/ грудень: &#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;скрипт для голосування X (погано підтримується станом на 2017 рік)
  • 🗶 (⚠ hex: &#x1F5F6;/ dec :): &#128502;сміливий скрипт бюлетеня X (погано підтримується станом на 2017 рік)
  • ⮽ (⚠ hex: &#x2BBD;/ dec :) &#11197;: урна зі світлом X (погано підтримується станом на 2017 рік)
  • 🗵 (⚠ hex: &#x1F5F5;/ dec :) &#128501;: урна для голосування зі сценарієм X (погано підтримується станом на 2017 рік)
  • 🗹 (⚠ шістнадцятковий: &#x1F5F9;/ dec :) &#128505;: урна з жирним перевіркою (погано підтримується станом на 2017 рік)
  • 🗷 (⚠ hex: &#x1F5F7;/ dec :) &#128503;: урна з жирним сценарієм X (погано підтримується станом на 2017 рік)

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

— Богдана Станческу
джерело
17

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

— Гамбо
джерело
Немає жодного шрифту, лише Lucida Sans Unicode, який віддалено виглядає шрифтом Unicode, але в ньому немає кліщів.
— Влад Гудим
Потім перерахуйте деякі шрифти , які мають гліф для цього персонажа: font-family: Arial Unicode MS, Lucida Sans Unicode, Lucida Grande.
— Gumbo
Гамбо, не працює. Крім того, у мене не встановлені Arial Unicode MS та Lucida Grande.
— Влад Гудим
Це приблизно так близько, як ви збираєтеся дістати, але, на жаль, Lucida Sans Unicode не постачає U + 2713/2714.
— bobince
13

Я зазвичай використовую шрифт fontawesome ( http://fontawesome.io/icon/check/ ), ви можете використовувати його у html-файлах: 

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

або в css:

content: "\f00c";
font-family: FontAwesome;
— стефан
джерело
11

Чому б ви не використовували елемент введення HTML в режимі лише для читання

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

Я припускаю, що це буде працювати у всіх браузерах.

— Дрейк
джерело
6
Нам не потрібен елемент керування, лише вказівка ​​на те, що певна опція доступна в матриці. Використання відключеного елемента керування було б неправильним у цьому випадку.
— Влад Гудим
11

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

Тому я знайшов можливе рішення, використовуючи дані зображення для відображення невеликої галочки:

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

Звичайно, ви можете створити своє власне зображення і використовувати конвертер, щоб додати його як data: image / gif. Сподіваюсь, це допомагає.

— Кай Ноак
джерело
8

хоча кодування браузера встановлює на UTF-8

(Якщо ви використовуєте числові посилання символів, звичайно, неважливо, яке кодування використовується, браузери отримуватимуть правильну кодову точку Unicode безпосередньо з числа.)

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

Буду вдячний, якщо хтось міг би перевірити FF у Windows. Я впевнений, що він не працюватиме у вікні, що не є Windows.

Збої для мене в Firefox 3, Opera та Safari. Цікаво, що працює в іншому браузері Webkit, Chrome. Також виходить з ладу в Linux (очевидно, оскільки Wingdings там не встановлений; він встановлений на Macs, але це не допоможе вам, якщо у Safari його немає).

Крім того, це досить неприємний злом - цей персонаж для всіх намірів і цілей "ü" і з'явиться таким чином для таких речей, як пошукові системи, або якщо текст буде скопійовано і вставлено. Правильні кодові точки Unicode - це шлях, якщо у вас справді немає альтернативи.

Проблема полягає в тому, що жоден шрифт у комплекті з Windows не постачає U + 2713 CHECK MARK ('✓'). Єдиний, який ви, швидше за все, можете знайти на машині Windows, - це «Arial Unicode MS», на який насправді не слід покладатися. Отже, врешті-решт, я думаю, що вам доведеться виконати будь-яке:

  • використовуйте інший символ, який краще підтримується (наприклад, "●" - куля , як використовується SO), або
  • використовуйте зображення з позначкою "✓" як текст alt.
— бобінець
джерело
8

Прийшовши дуже пізно на вечірку, я виявив, що &check;(✓) працював в Опері. Я не перевіряв його в будь-яких інших браузерах, але це може бути корисним для деяких людей.

— rossum
джерело
4
Варто зазначити, що &check;(і &checkmark;) обидва оцінюють, для &#10003;чого використовується верхня відповідь. Це сутність символів HTML5 і не працює в IE6.
— Джеймс Доннеллі
5 
.className {
   content: '\&#x2713';
}

Використовуючи властивість вмісту CSS, ви можете показати галочку із зображенням або іншим кодовим знаком.

— s-шарма
джерело
Не впевнений: w3schools.com/cssref/pr_gen_content.asp демонструє сумісність з firefox
— s-sharma
todomvc.com/labs/architecture-examples/react перевірте, чи працює він чи ні, як вони використовують вміст для позначки.
— s-шарма
4
Якщо ви хочете використовувати коди utf-8 у вмісті css, це можливо:.class{ content: "\2713"; }
— Morteza Ziyae
4

Чи вистачить √ (квадратний корінний символ & # 8730;)?

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

— Ян Кемп
джерело
Дякую! Квадратний корінь працює, але трохи схожий на помилку ... квадратний корінь? Але я думаю, за відсутності альтернативи, яка, можливо, буде настільки ж близькою, як це стає.
— Влад Гудим
1
Btw, вказуючи метатег, добре встановлює UTF-8 на шахті IE, тому в цьому випадку це не проблема.
— Влад Гудим
1
Квадратний корінь - це квадратний корінь, а галочка - галочка. Мені здається, що я поставив піктограму туалету на двері роздягальні.
— Волкер Е.
1
@VolkerE. Але це було б весело!
— Дейв Ньютон
3

Рішення із застосуванням Wingdings, який не базується на унікоді і не працює в 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> ✓
— Нішант
джерело
0

Ви можете додати маленький білий з GIF-кодом Base64 ( онлайн-генератор тут ):

url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==")

Наприклад, у Chrome я використовую його для створення стилю керування:

INPUT[type=checkbox]:focus
{
outline:1px solid rgba(0,0,0,0.2);
}

INPUT[type=checkbox]
{
background-color: #DDD;
border-radius: 2px;
-webkit-appearance: button;
width: 17px;
height: 17px;
margin-top: 1px;
cursor:pointer;
}

INPUT[type=checkbox]:checked
{
background:#409fd6 url("data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==") 3px 3px no-repeat;
}

Якщо ви просто хотіли це в тезі IMG, ви зробите галочку / галочку так:

<img alt="" src="data:image/gif;base64,R0lGODlhCwAKAIABAP////3cnSH5BAEKAAEALAAAAAALAAoAAAIUjH+AC73WHIsw0UCjglraO20PNhYAOw==" width="11" height="10">
— Воломіке
джерело
0

Використання шрифтів WebDing або WingDing - єдиний спосіб досягти мети цієї теми: вона повинна працювати, починаючи з IE 6.0.2900 . Тому я опублікував би тут деякі, а також деякі виправлення до опублікованих вище:

Cross
<span style="font-family: Wingdings;">&#251;</span><br>
    
Check
<span style="font-family: Wingdings;">&#252;</span><br>

Crossed Checkbox
<span style="font-family: Wingdings;">&#253;</span><br>
    
Checked Checkbox
<span style="font-family: Wingdings;">&#254;</span><br>
    
Empty Checkbox
<span style="font-family: Wingdings;">&#168;</span><br>
    
Thick Check
<span style="font-family: Webdings;">&#97;</span>
Розгорніть фрагмент

Довідка тут: крилаті вебдінги

— Дмитро Бабич
джерело
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.