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

人气:127 发布:2023-01-03 标签: html css fonts webfonts emoji

问题描述

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

我做错了什么?Emoji字体的使用方式是否不同?

推荐答案

颜色字体是相当新的几个相互竞争的标准,这些标准仍在发展中,并在公共文本库中实现(OpenType1.8刚刚发布,但有另一个颜色变化)。

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

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

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

18