Как запретить Chrome (или телефонные интернет-браузеры вообще) на устройстве Android заменить нестандартные символы Unicode для Emojis?

Привет, Stackoverflow, чтобы сделать то, о чем я спрашиваю, более ясен, я уточню.

Я использую следующие символы в преобразовании вращения: ☎ и ♦ и ✔ (☎ and ♦ and ✔ respectively) .

Однако на моем устройстве Android (смартфон LG G4) он заменяет эти текстовые символы нетекстовым изображением emojis, который не форматируется с помощью моих преобразований или стилей размера шрифта.

Я хочу заставить браузер использовать обычные символы в шрифте, который я поставил на своем веб-сайте (используя @ font-face с включенным файлом .ttf). На рабочих столах у меня нет никаких проблем с отображением моих выбранных символов, как предполагалось.

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

Вы должны включить webfont с поддержкой символов, которые вы хотите использовать.

Чтобы включить шрифт значка в CSS, используйте следующий код:

 @font-face { font-family: 'myfont'; src:url('fonts/myfont.eot?-td2xif'); src:url('fonts/myfont.eot?#iefix-td2xif') format('embedded-opentype'), url('fonts/myfont.woff?-td2xif') format('woff'), url('fonts/myfont.ttf?-td2xif') format('truetype'), url('fonts/myfont.svg?-td2xif#myfont') format('svg'); // Different URLs are required for optimal browser support // Make sure to : // 1) replace the URLs with your font's URLs // 2) replace `#myfont` with the name of your font font-weight: normal; // To avoid the font inherits boldness font-style: normal; // To avoid font inherits obliqueness or italic } .emoji { font-family: 'myfont', Verdana, Arial, sans-serif; // Use regular fonts as fallback speak: none; // To avoid screen readers trying to read the content font-style: normal; // To avoid font inherits obliqueness or italic font-weight: normal; // To avoid the font inherits boldness font-variant: normal; // To avoid the font inherits small-caps text-transform: none; // To avoid the font inherits capitalization/uppercase/lowercase line-height: 1; // To avoid the font inherits an undesired line-height -webkit-font-smoothing: antialiased; // For improved readability on Webkit -moz-osx-font-smoothing: grayscale; // For improved readability on OSX + Mozilla } 

Затем вы можете включить свой символ следующим образом:

 <span class="icon">&#9742;</span> <span class="icon">&#9993;</span> 

Если вы не знаете webfont, который поддерживает вашего персонажа, вы можете легко создать его самостоятельно, используя приложение Icomoon . См. Также шрифт иконок с открытым исходным кодом Emoji для примера шрифта Icon с поддержкой 650 символов, который я создал с помощью приложения Icomoon.

Если вы планируете использовать шрифт Icon (или любой другой шрифт значка), я бы рекомендовал вам отредактировать шрифт в приложении Icomoon, чтобы удалить все символы, кроме тех, которые вам нужны, поскольку это значительно снизит размер вашего файла!


Больше информации:

  • Создание webfont с дополнительными многоязычными символами плоскости Unicode