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

Question

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

15

我已经下载了谷歌的"Noto Color Emoji"字体，但无法使用。我对"Noto Sans Regular"等字体没有问题，但是在Firefox（Windows 10上）中使用"Noto Color Emoji"字体时出现以下错误：

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

1

你从哪里获取这个字体的？你确定它适合用于网页吗？ - deceze

你只在Firefox上遇到问题吗？是在Windows还是Mac系统上？ - Germano Plebani

https://github.com/googlei18n/noto-emoji/issues/43 - Paulie_D

我从这里得到了它：https://www.google.com/get/noto/#emoji-zsye-color 我在Windows 10上尝试了Firefox、Chrome、Internet Explorer和Edge。我还在Ubuntu Linux上用Firefox试过了。我认为操作系统不应该是问题，因为我并没有尝试安装字体。 - John

4个回答

6

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

目前，我们已经制作出一个可以简单嵌入到您网站中的.ttf字体。

从这里下载字体。
使用以下代码嵌入字体：

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

尽情享受吧！如有任何问题，请告诉我们。

注：目前支持 Firefox 和 Illustrator。

- Felix Haeberle

5

彩色字体是一项相对较新的技术，有几种竞争标准仍在不断发展和实现中（Opentype 1.8刚刚发布了另一个彩色版本）。它们今天很可能无法使用，除非在最新的预览浏览器中，即使在那里，支持水平也可能因底层系统而异，因为浏览器使用系统文本库（带有各种级别的覆盖）。旧软件将无法识别添加到这些字体中的Opentype扩展。最后，Noto Color Emoji基本上是一个原型，早期版本可能不符合后来标准化的规范，即使符合，彩色字体标准的使用方式仍然可能随着字体生产者和字体消费者在这个领域的成熟而不断发展。

- nim

Noto Color Emoji 似乎仍然存在支持不完全的问题。在 Chrome 中可以正常工作，但在 Firefox 中无法正常显示。 - biagidp

1

我使用font-family:'Segoe UI Emoji' 在Chrome，Firefox，IE11，Mac Safari和移动Safari上都有效。大多数表情符号都可以正常显示，包括普通字体中没有颜色的表情符号，例如山，对话气泡，画笔等。

在Android上无法正常显示 :(

- Curtis

1

请注意，'Segoe UI Emoji' 是现今常见的表情符号字体中最丑陋的一种。此外，它不支持国旗和一些其他字符。 - oriadam

2

重要的是要注意，您不需要_替换_现有字体以使用来自“Segoe UI Emoji”等字体的彩色表情符号。相反，您可以将“Segoe UI Emoji”添加到您的font-family样式值的末尾，这样它就会提供彩色表情符号（覆盖浏览器非彩色回退），但让您的常规字体（在开头列出）为常规字符提供支持。 - Venryx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joël · Accepted Answer

彩色字体即将到来，但您需要做以下之一：

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

目前，最新的解决方案看起来是网络使用的最佳选择！