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时，它不会在表情符号的span中显示文字。使用Chrome DevTools（Chrome中的F12），它表示span 具有正确的Noto Emoji Regular字体。

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

Answer 1

1-确保您的目录正确无误。

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

@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字体一起使用？

1 个答案: