Запретить рендеринг шрифта как эмодзи - PullRequest
Новая
       83

Запретить рендеринг шрифта как эмодзи

1 голос
/ 30 мая 2020

Я пытаюсь отобразить настраиваемый флажок в приложении Electron. 

:before {
    content: '✔';
}

Он отображается по-другому в случайном порядке без каких-либо изменений кода:

enter image description here enter image description here

Кажется, что по умолчанию используется шрифт Segoe UI Emoji. Можно ли принудительно выполнить рендеринг как левое изображение (не как эмодзи)?

1 Ответ

0 голосов
/ 31 мая 2020

Можно переопределить рендеринг эмодзи псевдоэлемента. Я бы порекомендовал использовать специальный символ Юникода. U + FE0E (0xFE0E) . Примерно так: content: "\2714 \FE0E";

content: "[enter your emoji unicode here] \FE0E";

Я использовал этот инструмент преобразования, чтобы получить правильный CSS юникод для размещения смайликов внутри «содержимого»: https://r12a.github.io/app-conversion/

О U + FE0E

Этот код может изменить внешний вид предыдущего символа. Если это символ, дингбат или эмодзи, U + FE0E заставляет его визуализировать текстовым способом по сравнению с цветным изображением. Стандарт Unicode определяет некоторые стандартизированные варианты. См. Также «Символ Unicode в виде текста или эмодзи» для обсуждения этого кода.

Источники: https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

Пример: 

.test:before {
  content: "✔";
}

.test2:before {
  content: "\2714 \FE0E";
}
<!-- if your looking in Chrome or Firefox this will both look the same -->
<div class="test"></div>
<div class="test2"></div>
...