防止字体呈现为表情符号答案

【问题标题】：Prevent font rendering as an emoji防止字体呈现为表情符号
【发布时间】：2023-03-22 19:36:01
【问题描述】：

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

:before {
    content: '✔';
}

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

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

【问题讨论】：

您可以尝试将字体系列设置为“Segoe UI Symbol”，等宽字体吗？不确定这是否适用于 Electron 应用程序，是否适用于在 Edge 中阻止它，它还默认呈现 UI Emoji。
这似乎有效。不能说 100%，因为它是随机出现的。这段代码是否也适用于 Mac 和 Linux，因为我认为它们有不同的表情符号字体：Apple Color Emoji & Noto Color Emoji？
您可以将其发布为答案。
你对，亚历克斯，我搜索了更多，并认为我找到了解决方案，但无法真正测试，但查看文档，这可能有效。
相关问题：stackoverflow.com/questions/24748565/…、stackoverflow.com/questions/8208126/…

【解决方案1】：

可以覆盖伪元素的表情符号渲染。我建议尝试使用特殊的 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 或 emoji，U+FE0E 会强制它被渲染与彩色图像相比，以文本方式呈现。统一码标准定义了一些标准化的变体。另见“Unicode 符号作为文本或表情符号”来讨论这个代码点。

例子：

.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>

【讨论】：