谷歌浏览器无法正确显示我的表情符号

Question

我正在使用 macOS Sierra 10.12.6 上的 Chrome Version 68.0.3440.106 (Official Build) (64-bit)。

我有以下代码: <div class="emoji">☺️</div> 它渲染出这样的结果: 。但应该渲染出这样的结果: 。只有这个特定的表情符号会出现这种情况，其他表情符号都能正常显示。为什么？

- moritzg

---

我遇到了相反的问题：https://stackoverflow.com/questions/32915485/how-to-prevent-unicode-characters-from-rendering-as-emoji-in-html-from-javascrip#comment100561519_38452396 - Ryan

Answer 1

如果您是一位开发人员，试图在您的网站上修复此问题，请尝试为表情符号添加一些字体族。这个方法对我遇到的相同问题有效。

  font-family: apple color emoji, segoe ui emoji, noto color emoji, android emoji, emojisymbols, emojione mozilla, twemoji mozilla, segoe ui symbol;

如果你是用户，你可以安装处理表情符号的 Chrome 扩展程序chromoji。

- wysocz

Answer 2

我知道我的回答有点晚了。但是我也遇到了同样的问题，并通过在我的CSS文件中添加@font-face导入解决了它。此外，我还下载了Google的NotoColorEmoji字体。这是该字体的页面。 TrueType文件可以在它的github上找到。所以，即使是Chromium，现在也可以在我的网站上正确显示表情符号了。

- Savel Mtrx

---

我明白了，但是你只能使用谷歌的表情符号吗？因为每个平台的表情符号都不一样。 - moritzg

没错。在那种情况下，我被绑定在字体符号堆栈中。但对我来说已经足够了：普通的一堆表情符号就在其中。 - Savel Mtrx

感谢@SavelMtrx！安装NotoColorEmoji字体解决了我在Chrome浏览器中的表情符号问题。对于那些在下载TTF字体后需要在Linux上安装字体的人，请参考https://www.unixtutorial.org/how-to-install-ttf-fonts-in-linux/上的说明。 - so2

Answer 3

这个答案中的CSS属性是让表情符号“正常工作”的一个不错的尝试，但正如在Web上使用本地表情符号的挣扎所述，它可能会产生意想不到的副作用。

其中一个问题是字体将特殊字符（如#、*和数字）视为表情符号。因此，您需要选择性地应用font-family到文本的哪些部分，并确保文本实际上应该无条件地被视为表情符号。

即使它似乎可以工作，将显示的表情符号因操作系统和浏览器而异，因此最好是不一致的。

最终，我放弃了尝试让表情符号适用于我的用例。

- ggorlen