Как предотвратить использование символов Unicode в качестве HTML-кода в HTML из JavaScript?

Я нахожу Юникод для специальных символов из поиска FileFormat.Info.

Некоторые символы отображаются в виде классических черно-белых глифов, таких как ⚠ (предупреждающий знак, \u26A0 или ⚠). Это предпочтительнее, так как я могу применить к ним стили CSS (например, цвет).

Другие отображаются как более новые мультипликационные эмодзи, такие как ⌛ (песочные часы, \u231B или ⌛). Они не являются предпочтительными, так как я не могу полностью их стилизовать.

Похоже, что браузер делает это изменение, так как я могу видеть глиф песочных часов на Mac Firefox, но не на Mac Chrome или Mac Safari.

Есть ли способ заставить браузеры отображать более старые (монотонные) версии для отображения?

Обновление: кажется (из комментариев ниже) есть селектор текстовой презентации, FE0E, доступный для применения text-vs-emoji. Селектор объединяется в виде суффикса без пробела в коде символа, например ⌛︎ для HTML-шестнадцатеричного или \u231B\uFE0E для JS. Однако, это просто не соблюдается всеми браузерами (например, Chrome и Edge).

Ответ 1

Добавьте символ выбора варианта Unicode для принудительного ввода текста, VS15, ︎ ,
Это заставляет предыдущий символ отображаться как текст, а не как символ эмодзи.

<p>🔒&#xFE0E;</p>

Результат: 🔒︎

Узнайте больше на: символ Unicode как текст или эмодзи

Ответ 2

У меня был такой символ Юникода, как span::before. Chrome использовал "Segoe UI Emoji" в качестве шрифта для его рендеринга. Даже когда я установил семейство шрифтов в "Symgo UI Symbol", это не сработало.

Но, когда я установил шрифт-семейство символом "Segoe UI Symbol" явно для span::before, а не только для span, тогда он работал.

Ответ 3

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">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>

Ответ 4

Ни одно из вышеперечисленных решений не работало для расширения "Emoji для Google Chrome".

Итак, я сделал скриншот символа Unicode "BALLOT BOX WITH CHECK" (U + 2611) и добавил его как изображение с php:

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

Смотрите: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

Ответ 5

Похоже, что Google Chrome для настольных компьютеров версии 75 устраняет неоднозначность своего подхода к отображению символов Юникода, основываясь на первом экранировании Юникода, с которым он сталкивается при загрузке страницы. Например, при анализе в качестве первого экранирования Юникода HTML в исходном коде страницы, не имеющего эквивалента эмодзи, & # 9207; кажется, разъясняет Chrome, что страница содержит экранированные символы, которые не должны отображаться как смайлики.

Ответ 6

Для меня в OSX решение заключалось в том, чтобы установить семейство шрифтов на EmojiSymbols

Ответ 7

Я не знаю, как отключить рендеринг типа emoji. Обычно я использую шрифт значка, например font awesome или glyphicons (поставляется с Bootstrap 3).

Преимущество использования этих символов в символах юникода заключается в том, что

вы можете выбирать из множества разных стилей, чтобы он соответствовал дизайну вашего сайта;
они совместимы между браузерами (если вы когда-либо пробовали использовать символ звездочки юникода, вы заметите, что он отличается от IE и другого браузера);
они полностью стилизуемы, как и символы юникода, которые вы пытаетесь использовать.

Единственным недостатком является то, что его еще одна вещь для загрузки браузера при просмотре вашей страницы.