Unicode 表情符号字符根据浏览器使用不同的图像/字体

Question

我目前正在开发一个项目，该项目嵌入一个使用 unicode 表情符号字符的对象。问题是，这些 un​​icode 表情符号字符的显示方式不同，具体取决于我使用的浏览器。例如，Google Chrome 和 Mozilla Firefox 仅显示 Windows 版本的 unicode 表情符号字符。另一方面，Internet Explorer 11 显示所需的版本（自定义字体）。

图片中的问题：

这是它的外观以及它在 Internet Explorer 11 上的外观（使用自定义字体）：

这是它目前在 Google Chrome 和 Mozilla Firefox 上的外观（具有标准 Windows 视觉效果）：

我正在使用的 unicode 表情符号字符可以在这里找到：链接。我正在使用的名为：694 空间上的“热饮料”。如您所见，我们识别一种视觉风格，即 Chrome 和 Firefox 使用的 Windows 风格。

所以，现在我知道 Chrome 和 Firefox 都使用 Windows 字体来实现 unicode 表情符号字符的可视化。基于此信息，我尝试通过编辑我的 css（确切地说是 @fontface）并导入自定义字体来解决此问题。这根本不起作用。之后我发现 Internet Explorer 确实可以正确显示它，而无需导入自定义字体。这让我相信解决方案在于这些浏览器之间的差异。问题是，我不知道是什么导致了这种差异。这就是我来这里的原因：

有谁知道是什么原因导致显示 unicode 表情符号字符时出现这种差异？我已经尝试自己解决这个问题，因为我怀疑它们可能不会都支持相同的字体，但如果我看这里： https: //www.w3schools.com/css/css3_fonts.asp似乎不可能问题。

任何帮助是极大的赞赏。

编辑：经过多次尝试，我有了新的发现。在 Windows 7 Ultimate 上，它可以在 Internet Explorer 11 和 Google Chrome 上显示正确的显示（非 Windows 屏幕）；

在 Windows 10 Enterprise 上，它仅在 Internet Explorer 11 上显示正确的显示（非 Windows 屏幕）。在 Google Chrome 上，它显示 Windows 字体。

那么现在的问题是，这些Windows版本之间的差异是什么导致了这种情况呢？

编辑：它变得更奇怪了。Windows 7 旗舰版 + GoogleChrome：

Windows 7 旗舰版 + Internet Explorer：

Windows 7 旗舰版 + Mozilla Firefox：

Windows 7 Ultimate 网页与 unicode emoji 的比较：

Windows 10 企业版 + Google Chrome：

Windows 10 企业版 Internet Explorer 11：

Windows 10 企业版 Mozilla Firefox：

Windows 10 Enterprise 网页与 unicode 表情符号的比较：

有人知道如何让它们看起来像 Windows 10 企业版 Internet Explorer 11 示例吗？

Answer 1

解决方案是强制将此 css 置于嵌入元素之上：

font-family: "Segoe UI 符号";

这是我正在寻找的黑白字体，我错误地认为是原生 unicode 字体。

解决之道：

• 经过一些帮助和大量搜索后，我发现没有原生的 unicode 字体，因此我只需要找到正确的字体。
• 经过长时间的搜索后，我发现了这个： https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/11635143/
• 其中包括此链接： https: //codepen.io/prometheusTX/pen/vmZzxG：

span {

  font-size:36px;

  font-family: "Segoe UI Emoji";

}

h1 {

  font-size:36px;

  font-family: "Segoe UI Symbol";

}

• 如您所见，我在这里找到了我正在寻找的解决方案/字体。

最终，这很简单，但实现这一目标的过程却相当困难。

感谢大家在这里和其他地方提供的帮助。