Emoji 显示黑白（windows7 chrome、edge）答案

【问题标题】：Emoji display black and white (windows7 chrome, edge)Emoji 显示黑白（windows7 chrome、edge）
【发布时间】：2021-06-26 05:47:40
【问题描述】：

我使用 Emoji Unicode https://www.w3schools.com/charsets/ref_emoji.asp 将 emoji 添加到我的网站在 android、mac 和 iphone 用户上有彩色表情符号，而在 windows7（chrome 和 edge）上有黑白表情符号。我还没有测试过windows10。

有什么办法可以解决这个问题？

我这边的 SCR 预览：

【问题讨论】：

标签： php html emoji emoticons

【解决方案1】：

Windows 7 不支持彩色字体。Windows 7 于 2009 年发布，就在表情符号被添加到 Unicode 之前。彩色字体支持已添加到 Windows 8.1。您应该考虑升级到 Windows 10。

【讨论】：

【解决方案2】：

我希望我可以帮助那些关注这个话题的人：

截至 11 月 15 日，我的表情符号也出现了类似问题。我正在使用node-emoji。它们仅在 Google Chrome 中变成黑白（在 Google Chrome 更新后）。在这次更新之前一切都很好。

我发现这是因为我将font-weight: bold 应用于那个表情符号。当我对其施加正常重量时，表情符号又恢复了多彩的自我:-)。

【讨论】：

我在最新的 Chrome 更新后遇到了同样的问题，删除粗体字体就可以了，谢谢！

【解决方案3】：

Windows 7 不支持彩色表情符号。这将是问题的原因。在您的网站上绕过此问题的一种方法是使用表情符号库并为其着色。

你可以这样做：

Twitter Twemoji
或FontAwesome

您可以使用其他的，但这些是迄今为止最流行的表情符号库。 Twemoji 是 Twitter 用于他们的表情符号的。

使用 FontAwesome，您可以在他们的网站上找到他们的代码，然后将其粘贴到您的网站上，然后搜索您想要的表情符号。（您可以在 CSS 中使用 color: [color] 为它着色。）

FontAwesome 可以使用下面的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<i class="fas fa-heart" style="color:red;padding-right:5px;"></i>
<i class="fas fa-grin" style="color:#fcbe03;padding-right:5px;"></i>
<i class="fas fa-thumbs-up" style="color:limegreen;padding-right:5px;"></i>

使用 Twemoji 时，情况几乎相同，但您必须注明出处。他们的网站上有指南。

【讨论】：