防止字体渲染为表情符号

Question

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

:before {
    content: '✔';
}

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

似乎它默认为字体Segoe UI Emoji。是否可以强制渲染为左图片（而不是表情符号）？

Answer 1

可以覆盖伪元素的Emoji渲染。我建议尝试使用特殊的unicode字符。 U + FE0E（0xFE0E）。像这样：content: "\2714 \FE0E";

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

我使用此转换工具为表情符号获取了正确的CSS Unicode代码，以将其放置在“内容”中：https://r12a.github.io/app-conversion/

关于U + FE0E

此代码点可能会更改前一个字符的外观。 如果该符号是dingbat或表情符号，则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>