如何将@font-face与Noto表情符号字体逐字符引用一起使用

我有两个本地文件

index.html
NotoEmoji-Regular.ttf

我已经从google.com/get/noo/.下载了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字体。

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

1-确保您的目录是正确的。

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

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

3-&#x1F595；使用Noto表情符号字体不正确。试用：ℹ(ℹ)

对于跨浏览器，您必须转换为web字体，例如：

@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 */
}

相关内容

最新更新

热门标签：