Я нахожу Юникод для специальных символов из поиска FileFormat.Info.
Некоторые символы отображаются в виде классических черно-белых глифов, таких как ⚠ (предупреждающий знак, \u26A0 или ⚠). Это предпочтительнее, так как я могу применить к ним стили CSS (например, цвет).
Другие отображаются как более новые мультипликационные эмодзи, такие как ⌛ (песочные часы, \u231B или ⌛). Они не являются предпочтительными, так как я не могу полностью их стилизовать.
Похоже, что браузер делает это изменение, так как я могу видеть глиф песочных часов на Mac Firefox, но не на Mac Chrome или Mac Safari.
Есть ли способ заставить браузеры отображать более старые (монотонные) версии для отображения?
Обновление: кажется (из комментариев ниже) есть селектор текстовой презентации, FE0E, доступный для применения text-vs-emoji. Селектор объединяется в виде суффикса без пробела в коде символа, например ⌛︎ для HTML-шестнадцатеричного или \u231B\uFE0E для JS. Однако, это просто не соблюдается всеми браузерами (например, Chrome и Edge).
Добавьте символ выбора варианта Unicode для принудительного ввода текста, VS15, ︎ ,
Это заставляет предыдущий символ отображаться как текст, а не как символ эмодзи.
<p>🔒︎</p>
Результат: 🔒︎
Узнайте больше на: символ Unicode как текст или эмодзи
У меня был такой символ Юникода, как span::before. Chrome использовал "Segoe UI Emoji" в качестве шрифта для его рендеринга. Даже когда я установил семейство шрифтов в "Symgo UI Symbol", это не сработало.
Но, когда я установил шрифт-семейство символом "Segoe UI Symbol" явно для span::before, а не только для span, тогда он работал.
Android-шрифты не богаты, как вы могли ожидать. Файлы шрифтов не имеют этих экзотических символов, а Android имеет хак для нескольких символов без символов. Они заменены на иконки.
Поэтому решение заключается в интеграции сайта с веб-шрифтом (woff). Создайте новый файл шрифта с помощью FontForge и выберите требуемый глиф, например, из TTF со свободным засечкой. Каждый глиф занимает 1к. Создать файл woff.
Подготовьте простой CSS для импорта семейства пользовательских шрифтов.
style.css:
@font-face {
font-family: 'Exotic Icons';
src: url('exotic-icons.woff') format('woff');
}
.exotic-symbol-font {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Exotic Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
файл index.html:
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></head>
<title>Test custom glyphs</title>
</head>
<body>
<table>
<tr>
<td class="exotic-symbol-font">
😭 ☠ ♠ a g
</td>
</tr>
</table>
</body>
</html>
Ни одно из вышеперечисленных решений не работало для расширения "Emoji для Google Chrome".
Итак, я сделал скриншот символа Unicode "BALLOT BOX WITH CHECK" (U + 2611) и добавил его как изображение с php:
$ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # ☑ or /U2611
Смотрите: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
Похоже, что Google Chrome для настольных компьютеров версии 75 устраняет неоднозначность своего подхода к отображению символов Юникода, основываясь на первом экранировании Юникода, с которым он сталкивается при загрузке страницы. Например, при анализе в качестве первого экранирования Юникода HTML в исходном коде страницы, не имеющего эквивалента эмодзи, & # 9207; кажется, разъясняет Chrome, что страница содержит экранированные символы, которые не должны отображаться как смайлики.
Для меня в OSX решение заключалось в том, чтобы установить семейство шрифтов на EmojiSymbols
Я не знаю, как отключить рендеринг типа emoji. Обычно я использую шрифт значка, например font awesome или glyphicons (поставляется с Bootstrap 3).
Преимущество использования этих символов в символах юникода заключается в том, что
Единственным недостатком является то, что его еще одна вещь для загрузки браузера при просмотре вашей страницы.