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

Question

我已下载Google's "Noto Color Emoji"字体，但无法使其正常工作。我对“Noto Sans Regular”等字体没有任何问题。但是使用“Noto Color Emoji”字体我在Firefox（Windows 10）中出现以下错误：

waiting for connection...

它也无法与Windows 10上的Chrome，Internet Explorer和Edge以及Ubuntu Linux上的Firefox一起使用。

这是我的代码：

<!-- BEFORE -->
<div class="block" each="3"></div>

<!-- AFTER -->
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>

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

Answer 1

颜色字体很新，有几个竞争标准，这些标准仍在不断发展，并且在常见的文本库中实现（Opentype 1.8刚刚发布了另一种颜色扭曲）。

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

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

最后，Noto Color Emoji几乎是一个原型，早期版本很可能不符合以后标准化的版本，即使它们已经使用，颜色字体标准的使用方式仍有可能发展为字体生成者和字体消费者在这个主题上获得成熟。

Answer 2

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

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

最新的解决方案目前是网络使用的最佳解决方案！

Answer 3

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

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

1. 从here下载字体。 ?
2. 嵌入字体：

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

3. 享受吧！ ? 如果有任何问题，please let us know。

注意：目前支持 Firefox 和 Illustrator。

Answer 4

我使用字体家族：“ Segoe UI表情符号” 适用于Chrome，Firefox，IE11，Mac Safari和移动Safari。 大多数情况下，所有表情符号都可以使用，包括在正常字体上没有任何颜色的表情符号，例如山峰，讲话泡泡，画笔。

在Android上不起作用：（