如何在网站上使用表情符号字体?

新手上路,请多包涵

我下载了 Google 的“Noto Color Emoji” 字体,但无法使用。我对“Noto Sans Regular”这样的字体没有任何问题。但是使用“Noto Color Emoji”字体时,我在 Firefox 中(在 Windows 10 上)出现以下错误:

 downloadable font: no supported glyph shapes table(s) present (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)
downloadable font: rejected by sanitizer (font-family: "NotoColorEmoji" style:normal weight:normal stretch:normal src index:0)

它也不适用于 Windows 10 上的 Chrome、Internet Explorer 和 Edge 或 Ubuntu Linux 上的 Firefox。

这是我的代码:

 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        @font-face {
            font-family: 'NotoColorEmoji';
            src: url('NotoColorEmoji.ttf') format('truetype');
        }
    </style>
</head>

<body>
    <span style="font-family: 'NotoColorEmoji'">Emojis: 😀😬😁😂😃😄😅😆😇😉😊🙂</span>
</body>

我究竟做错了什么?表情符号字体的使用方式不同吗?

原文由 John 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 955
2 个回答

彩色字体是相当新的,有几个竞争标准仍在发展并在通用文本库中实现(Opentype 1.8 刚刚发布,带有另一种颜色扭曲)。

除了在最新的预览浏览器中,它们今天不太可能工作,即使那样,支持级别也可能会有所不同并取决于底层系统,因为浏览器确实使用系统文本库(具有不同级别的覆盖)。

较旧的软件将无法识别为使这些字体成为可能而添加的 Opentype 扩展。

最后,Noto Color Emoji 几乎是一个原型,早期版本可能不太符合后来的标准化,即使符合,彩色字体标准的使用方式仍有可能随着字体生产商和字体消费者在这个主题上变得成熟。

原文由 nim 发布,翻译遵循 CC BY-SA 3.0 许可协议

彩色字体即将推出,但您需要:

  • 在一种字体中实现所有颜色格式(总共 4 种!) -> 我不知道是否有人这样做过,但字体会很大,而且看起来真的很复杂,不推荐使用。
  • 为每种格式制作一种字体并有条件地加载它。 -> 不推荐,因为某些格式是基于位图的,而不是矢量和字体可能很大 (+20Mo)。
  • 等待所有平台上的 OpenType SVG 格式支持。
  • 在javascript中做
    • Twemoji “一个简单的库,在所有平台上提供标准的 Unicode 表情符号支持。”
    • EmojiOne “EmojiOne™ 是开放的表情符号标准。”

最新的解决方案看起来是目前最适合 Web 使用的解决方案!

原文由 Joël 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题