Html 字符表情符号不呈现

Question

我想在 html 页面中添加表情符号，例如。但它们不使用彩色图标呈现。

我尝试了以下方法

  <meta charset="utf-8" />
  <body>
    
    
  </body>
</html>

并且它没有分别显示英国国旗和羊的彩色图标。我也尝试将表情符号字符包装在 span 中，但它都不起作用。也许与字体有关？

Answer 1

表情符号的呈现取决于您用来显示它们的字体。表情符号只是普通字符，例如字母 "A"，需要使用您在页面上使用的字体进行定义。要正确显示表情符号，您需要使用定义了这些表情符号的字体，并将 <span>（或您的整个页面）设置为使用该字体（CSS）。

Here是对Emojis的解释。以下是如何在您的网站上使用 Google Noto Emoji Color 字体（免费使用）的示例：

1- 下载字体 (here)

2- 将其嵌入您的 CSS:

@font-face {
    font-family: "Noto Emoji Regular";
    src: url('NotoEmoji-Regular.ttf')  format('truetype');
}

确保 url 具有本地 .tff 文件的正确路径并将其添加到您的页面 <style> 定义或 CSS 文件。

Answer 2

我发现表情符号在其他设备上可以正常显示。可能是字体配置问题。正如 Sachin Muthumala 所说，这里他们对此进行了更多解释

Html character emoji does not render