跨浏览器一致显示 UTF8 表情符号

Consistent display of UTF8 emojis across browsers

我有一个纯文本的评论文本框(用户可以提交评论),并且接受 UTF8 表情符号,例如“你好”。

这最终显示在 <div class="comment"> 中,它已经使用了 Google 字体(Barlow Semi Condensed)。

如何使这个表情符号在不同浏览器中呈现一致?

例如,(代码点 U+1F602)在 Chrome 中不会以彩色出现在 Windows 中(至少在某些版本中是这样),而只会以黑白显示,而它出现在 Firefox 中为黄色和蓝色。

我认为使用 font-awesome 会允许这样做,但 font-awesome 要求我们使用 <i class="..."></i> 而不是,这是不可能的,因为用户将提交包含 UTF8 表情符号的普通文本。

由于各种原因这是不可能的:

  • Windows从8.1开始正式支持多色字体。如果浏览器使用系统的字体呈现,则结果将因操作系统及其版本而异。
  • Gecko engines (e.g. Firefox) and Goanna engines (e.g. Pale Moon) come with their own font(s) (which you can delete) 最重要的是自己呈现该字体,而不是依赖于系统。因此,即使在 Windows 7 下,浏览器也会呈现彩色表情符号,尽管操作系统本身无法做到这一点。
  • 默认字体 and/or 表情符号的默认字体可能因个人设置而异,无论是在操作系统范围内(用户设置)还是在安装范围内(程序)and/or设置)。可以修改设置 - 并非每个人都使用 Times New Roman 的出厂设置作为 Internet 浏览器中网站的默认字体。同样,如果您未定义,则显示表情符号的默认值可能会有所不同(根据 CSS)。

这就像期望用户安装了感兴趣的字体以及感兴趣的最小版本一样不可能:Tahoma 是一个问题,但version 5.22 or 7.00 又是一个。