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

Posted 2023-03-15

技术标签:

【中文标题】如何在网站上使用表情符号字体？【英文标题】：How to use an emoji font on a website? 【发布时间】：2017-02-13 23:27:13 【问题描述】：

我已下载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)

它也不适用于 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>

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

【问题讨论】：

你到底是从哪里得到字体的？你确定它适合网络吗？你只有firefox的问题？赢了，麦克？ github.com/googlei18n/noto-emoji/issues/43 我从这里得到它：google.com/get/noto/#emoji-zsye-color 我在 Windows 10 上使用 Firefox、Chrome、Internet Explorer 和 Edge 进行了尝试。我还在 Ubuntu Linux 上使用 Firefox 进行了尝试。我不认为操作系统应该是问题，因为我没有尝试安装字体。 【参考方案1】：

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

目前，我们提供了一种 .ttf 字体，您可以简单地将其嵌入到您的网站中

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

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

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

注意：目前支持 Firefox 和 Illustrator。

【讨论】：

【参考方案2】：

我使用 font-family:'Segoe UI Emoji' 适用于 Chrome、Firefox、IE11、Mac Safari 和移动 Safari。大多数表情符号都能正常工作，包括那些在普通字体上没有任何颜色的表情符号，例如山、对话泡泡、画笔。

不适用于android :(

【讨论】：

请注意，“Segoe UI Emoji”是当今常见的表情符号字体中最难看的字体。它也不支持国家标志和其他一些字符。请务必注意，您无需替换现有字体即可使用“Segoe UI Emoji”等字体中的彩色表情符号。相反，您可以在 font-family 样式值的末尾添加“Segoe UI Emoji”，这样它就可以提供彩色表情符号（在浏览器非彩色后备上），但让您的常规字体（在开始时列出）执行提升常规字符。【参考方案3】：

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

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

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

【讨论】：

EmojiOne 不是免费的商业应用程序。 2020-07-28 的许可证更新：EmojiOne 已更名为 JoyPixels。 PNG 32px、64px 和 128px 以及 32px 和 64px 精灵可用于数字用途，并注明出处。有关使用和归属要求的更多信息，请参阅joypixels.com/licenses/free。【参考方案4】：

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

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

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

最后，Noto Color Emoji 几乎是一个原型，很可能早期版本不太符合后来标准化的内容，即使符合，颜色字体标准的使用方式仍可能演变为字体生产者和字体消费者在这个主题上越来越成熟。

【讨论】：

Noto Color Emoji 的支持似乎仍然参差不齐。适用于我的 chrome 但不适用于 Firefox。

以上是关于如何在网站上使用表情符号字体？的主要内容，如果未能解决你的问题，请参考以下文章

CSS 对手机表情符号字体的引用？

emoji纸飞机表情符号怎么输入

如何在python中使用表情（emoji）符号？

《现代命令行工具指南》15.表情符号：在命令行中查找表情符号 - emoj