在HTML中无法显示微笑的表情符号:relaxed:

6
我正在尝试为网站聊天工具显示表情符号,除了微笑的脸表情符号之外,所有表情符号都能正确显示。更奇怪的是,我在两个网站上工作,其中一个网站可以正确显示表情符号,而另一个网站则不能(它们的unicode相同)。 当我将此表情符号复制粘贴到Skype中时,计算机上会显示☺,但在我的手机Skype应用程序中,它会正确显示表情符号,因此unicode肯定是正确的。 如何使此表情符号在浏览器中显示?这是否取决于某种字体?

@TamásBolvári虽然如此,我的问题更容易找到,并且有一个正确标记的答案。 - Xitcod13
3个回答

11

我曾经遇到同样的问题,并通过将以下内容设置为字体家族来解决它:

font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", Times, Symbola, Aegyptus, Code2000, Code2001, Code2002, Musica, serif, LastResort;


我认为更改字重也很重要 font-weight: 400; 因为在某些字体中具有特定值可能会导致其不出现。 - Xitcod13

2
替换非全限定符号☺(U+263A)尝试使用全限定符号☺️(U+263A U+FE0F),它是一个完全限定的表情符号序列(U+263A WHITE SMILING FACE后跟U+FE0F VARIATION SELECTOR-16)。您可以在emoji-test.txt数据文件中获取所有完全限定和非完全限定的表情符号序列的详尽列表。

1
我复制粘贴了你的第二个表情符号,但是没有任何变化 :/ - Xitcod13
我最初拥有的表情符号在一个网站上显示,因此必须有一种方法使其在另一个网站上显示。如果您将鼠标悬停在问题列表中的问题标题上,它甚至会在stackoverflow上显示。 - Xitcod13

1

我不知道为什么,但将字体的样式属性设置为200可以使表情符号正确显示。

font-weight: 200;

你用的是什么字体?(浏览器实际渲染了哪种字体?) - ssc-hrep3
1
三藩市文本,无衬线字体 - Xitcod13
它原本渲染 Helvetica 字体,但在我更改了字体重量后,开始渲染 Apple Color Emoji 字体。 - Xitcod13
在显示表情符号时,请确保使用所有相关字体。否则,例如在Windows中,它们会看起来很奇怪。 - ssc-hrep3
你能给我列出所有相关字体的清单吗? 这正是我在这个问题中所问的。 - Xitcod13
我可能会参考 emojipedia 在其复制/粘贴框中使用的字体样式: font-weight: 400; font-family: apple color emoji,segoe ui emoji,noto color emoji,android emoji,emojisymbols,emojione mozilla,twemoji mozilla,segoe ui symbol - ssc-hrep3

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接