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

Question

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

图片中的问题：

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

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

我使用的 unicode 表情符号可以在这里找到：link。 我正在使用的是：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 Ultimate + GoogleChrome：

Windows 7 Ultimate + Internet Explorer：

Windows 7 Ultimate + Mozilla Firefox：

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

Windows 10 企业版 + 谷歌浏览器：

Windows 10 企业版 Internet Explorer 11：

Windows 10 企业版 Mozilla Firefox：

Windows 10 Enterprise 网页与 unicode emoji 的比较：

有人知道如何让它们看起来都像 Windows 10 Enterprise 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";

}

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

最后它很简单，但通往它的旅程相当困难。

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