如何通过字符引用将 @font-face 与 Noto Emoji 字体一起使用？

Question

我有两个本地文件

index.html
NotoEmoji-Regular.ttf

我已经从 google.com/get/noto/ 下载了 NotoEmoji-Regular.ttf。

index.html 包含这个：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Emoji</title>
    <style>
        @font-face {
            font-family: "Noto Emoji Regular";
            src: url("NotoEmoji-Regular.ttf");
        }
        span {
            font-family: "Noto Emoji Regular";
        }
    </style>
</head>
<body>
    Emoji: <span>&#x1F595;</span>
</body>
</html>

当我在浏览器中打开 index.html 时，它不会在 Emoji 中显示 span 中的文本。使用 Chrome DevTools（Chrome 中的 F12）它说 span 有正确的 Noto Emoji Regular 字体。

如何显示此字体的表情符号图标？

Answer 1

1- 确保您的目录正确。

2- 您应该添加字体源格式：

@font-face {
 font-family: "Noto Emoji Regular";
 src: url('NotoEmoji-Regular.ttf')  format('truetype');
}

3-&#x1F595； Noto Emoji 字体不正确。尝试：ℹ (ℹ)

对于跨浏览器，您必须 convert 网页字体，例如：

@font-face {
 font-family: 'Noto Emoji Regular';
 src: url('NotoEmoji-Regular.eot'); /* IE9 Compat Modes */
 src: url('NotoEmoji-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
   url('NotoEmoji-Regular.woff2') format('woff2'), /* Super Modern Browsers */
   url('NotoEmoji-Regular.woff') format('woff'), /* Pretty Modern Browsers */
   url('NotoEmoji-Regular.ttf')  format('truetype'), /* Chrome, Safari, Android, iOS */
   url('NotoEmoji-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}

如何通过字符引用将 @font-face 与 Noto Emoji 字体一起使用？

How do I use @font-face with the Noto Emoji font by character references?

html

css

font-face