防止字体呈现为表情符号

Question

我正在尝试在 Electron 应用程序中呈现自定义复选框。

:before {
    content: '✔';
}

它在没有任何代码更改的情况下随机呈现不同的内容：

好像默认是一种字体Segoe UI Emoji。是否可以强制渲染为左图（而不是表情符号）？

Answer 1

可以覆盖伪元素的表情符号呈现。我建议尝试使用特殊的 unicode 字符。 U+FE0E (0xFE0E)。像这样：content: "14 \FE0E";

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

我使用此转换工具为表情符号获取了正确的 CSS unicode 以放置在 'content' 中：https://r12a.github.io/app-conversion/

关于U+FE0E

This codepoint may change the appearance of the preceding character. If that is a symbol, dingbat or emoji, U+FE0E forces it to be rendered in a textual fashion as compared to a colorful image. The Unicode standard defines some standardized variants. See also “Unicode symbol as text or emoji” for a discussion of this codepoint.

来源：https://codepoints.net/U+FE0E, https://mts.io/2015/04/21/unicode-symbol-render-text-emoji/

示例：

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

.test2:before {
  content: "14 \FE0E";
}

<!-- if your looking in Chrome or Firefox this will both look the same -->
<div class="test"></div>
<div class="test2"></div>

防止字体呈现为表情符号

Prevent font rendering as an emoji

css

fonts

google-chrome

emoji

electron