Unicode 表情符号字符根据浏览器使用不同的 image/font

Unicode emoji characters use different image/font based on browser

我目前正在从事一个项目,该项目嵌入了一个使用 unicode 表情符号字符的对象。问题是,这些 un​​icode 表情符号字符显示不同,具体取决于我使用的浏览器。 Google Chrome 和 Mozilla Firefox 例如只显示 windows 版本的 unicode 表情符号字符。另一方面,Internet Explorer 11 显示所需的版本(自定义字体)。

图片问题:

这是它的外观以及在 Internet Explorer 11 上的外观(使用自定义字体):

这是它目前在 Google Chrome 和 Mozilla Firefox 上的样子(使用标准 windows 视觉效果):

我使用的 unicode 表情符号可以在这里找到:link。 我使用的是:"hot beverage" on space 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网页与unicode emoji的终极对比:

Windows 10 企业 + Google Chrome:

Windows 10 企业版 Internet Explorer 11:

Windows 10 企业版 Mozilla Firefox:

Windows 10 unicode emoji网页企业对比:

有人知道如何使它们看起来都像 Windows 10 Enterprise Internet Explorer 11 示例吗?

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

font-family: "Segoe UI Symbol";

这是我一直在寻找的黑白字体,我错误地认为它是本机 unicode 字体。

解决之道:

span {

  font-size:36px;

  font-family: "Segoe UI Emoji";

}

h1 {

  font-size:36px;

  font-family: "Segoe UI Symbol";

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

最后很简单,但通往它的过程却很艰难。

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