如何在Chrome浏览器上正确显示“赞”HTML实体？

Question

我的网站有一些点赞图片，我想将它们渲染为HTML实体。十进制和十六进制代码分别如下：

👍 (十进制)
👍 (十六进制)

👍
👍

分别在FF和Chrome中渲染，两个代码都显示为“点赞”，但在Chrome中两者都没有显示（根本没有任何内容）。以下是深色背景下的渲染结果（白色部分）。 为什么会这样？

- The One and Only ChemistryBlob

---

对我来说，它们在Firefox上也不起作用。 - Oriol

@Oriol 我已经附上了一张在FF上字体大小为40px时的截图。 - The One and Only ChemistryBlob

你能在这里看到什么吗？如果可以，那么该字符可能出现在 Stack Overflow 的字体堆栈中，或者出现在 Mac OS X 上 Safari 的其中一个回退字体中。字体堆栈和回退字体的处理方式因浏览器/版本而异。 - Jongware

@Jongware...不，我在Chrome上看到一个框。 - The One and Only ChemistryBlob

Answer 1

一般来说，对于这样的表情符号实体，您不能依赖最终用户的字体包含它。这在Chrome中尤其如此（截至2014年12月），这是最后一个默认情况下无法渲染表情符号的主要浏览器。

在这里使用图像是最好的选择。

使用自定义字体也是一个不错的解决方案（感谢@Vucko）。

- Ben Lee

---

图像或自定义字体，例如fontawesome。 - Vucko

@Ben Lee 我猜你的意思是我无法控制这个，比如将我的网站默认字体从 Arial 更改为 Verdana？ - The One and Only ChemistryBlob

@TheOneandOnlyChemistryBlob -- 没错。除非你使用自定义字体，就像Vucko指出的那样。 - Ben Lee

我这样做的原因之一是为了减少从服务器下载图像的次数...如果我使用fontawesome，难道不是只是将一个下载替换为另一个下载吗？是否有性能提升，还是仅用于UI / UX？ - The One and Only ChemistryBlob

我认为你无法避免某些下载。但是你可以将其限制为一个。使用自定义字体可以让你在一个字体下载中包含任意数量的符号。或者，你可以使用一个包含所有图标的单个精灵图像（并使用适当的位置/裁剪显示它）。无论哪种方式，对于任何数量的图标，都只需要进行一次下载。 - Ben Lee

这不仅仅是默认字体的问题。表情符号包含在字体中，而不是浏览器中。 - Jukka K. Korpela

Answer 2

拇指向上符号（U+1F44D）的字体支持非常有限，这通常是由于最近添加到Unicode中的任何字符都如此。许多用户的系统都没有这些字体，因此使几乎所有浏览器呈现该字符的唯一方法是通过@font-face使用可下载字体（Web字体）; 实际上，您可以使用Quivira或Symbola来实现。由于它们是相当大的字体，使用图像可能是更好的选择。

当您使用字符但未指定字体，或指定不包含该字符的字体或字体列表时，浏览器会使用一些备用字体。它们可能以不同的方式执行此操作，因此在相同系统中的浏览器呈现它们时可能会有所不同，因为它们以不同的顺序扫描字体列表。此外，浏览器在这方面存在错误。根据CSS规范，如果系统中的任何字体都包含该字符，则应该呈现该字符，但它们经常无法做到这一点。有时这是由于错误的字体造成的：字体包含某些信息，根据这些信息它具有某个字符，因此浏览器使用该字体，但实际上该字符缺失，会出现一些通用符号。有时我们只是不知道失败的原因。

您可以通过明确列出已知包含该字符的字体来避免此类错误。但是，当用户的系统没有这些字体时，这当然是无效的。

<style>
.emoji {
  font-family: Segoe UI Emoji, Segoe UI Symbol, Quivira, Symbola;
}
</style>
<span class=emoji>&#x1F44D;</span>

- Jukka K. Korpela