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

Joh*_*ohn 10 html css fonts webfonts emoji

我已经下载了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)
Run Code Online (Sandbox Code Playgroud)

它也不适用于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>
Run Code Online (Sandbox Code Playgroud)

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

Joë*_*oël 8

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

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

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

\n

  • EmojiOne 对于商业应用程序来说不是免费的。 (3认同)

Fel*_*lix 7

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

\n

目前,我们有一种.ttf字体可以使用,您可以轻松地将其嵌入到您的网站中

\n
    \n
  1. 从这里下载字体。
  2. \n
  3. 嵌入字体:
  4. \n
\n
@font-face {\n  font-family: \'OpenMoji\';\n  src: URL(\'OpenMoji-Color.SVG.ttf\') format(\'truetype\');\n}\n
Run Code Online (Sandbox Code Playgroud)\n
    \n
  1. 享受!如有任何疑问,请告诉我们
  2. \n
\n

\xc2\xa0

\n

开放表情符号描述

\n

注意:目前支持 Firefox 和 Illustrator。

\n


nim*_*nim 5

彩色字体是一种相当新的事物,它具有一些相互竞争的标准,这些标准还在不断发展并在普通文本库中实现(Opentype 1.8刚刚发布了另一种颜色)。

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

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

最后,Noto Color Emoji几乎是一个原型,它的早期版本可能与后来的标准化不太吻合,即使是这样,使用彩色字体标准的方式仍可能随着字体生产者和使用者的发展而发展。字体消费者在该主题上日趋成熟。