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

Question

我下载了 Google's "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)

它也无法与 Chrome、Windows 10 上的 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>

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

Answer 1

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

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

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

最后，Noto Color Emoji 基本上是一个原型，很可能早期的版本不太符合后来的标准，即使符合，彩色字体标准的使用方式也很可能随着字体生产者和字体消费者在这个主题上的成熟而发展。

Answer 2

即将推出彩色字体，但您需要：

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

最新的解决方案看起来是目前最适合网络使用的解决方案！

Answer 3

我使用字体系列：'Segoe UI Emoji' 适用于 Chrome、Firefox、IE11、Mac Safari 和移动版 Safari。大多数表情符号都可以使用，包括那些在普通字体上没有任何颜色的表情符号，例如山、对话泡泡、画笔。

不适用于 Android :(

Answer 4

我们目前正在开发名为 OpenMoji 的开源表情符号库。

目前，我们有一个 .ttf 字体可以工作，您可以简单地将其嵌入您的网站

从 here 下载字体。
嵌入字体：

@font-face {
  font-family: 'OpenMoji';
  src: URL('OpenMoji-Color.SVG.ttf') format('truetype');
}

尽情享受吧！如果有任何问题，please let us know.

注意：目前支持 Firefox 和 Illustrator。

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

How to use an emoji font on a website?

html

css

fonts

webfonts

emoji