Html 如何通过字符引用将@font-face与Noto表情符号字体一起使用？_Html_Css_Font Face

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

html css

Html 如何通过字符引用将@font-face与Noto表情符号字体一起使用？,html,css,font-face,Html,Css,Font Face,我有两个本地文件 index.html NotoEmoji-Regular.ttf 我已经从下载了notemoji Regular.ttf index.html包含以下内容： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Emoji</title> <style> @font-face {

我有两个本地文件

index.html
NotoEmoji-Regular.ttf

我已经从下载了notemoji 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>


表情符号
@字体{
字体系列：“Noto表情符号规则”；
src:url（“NotoEmoji Regular.ttf”）；
}
跨度{
字体系列：“Noto表情符号规则”；
}
表情符号：🖕；

当我在浏览器中打开

index.html

时，它不会在Emoji的

span

中显示文本。使用Chrome DevTools（Chrome中的F12）显示

span

确实有正确的

Noto-Emoji常规字体
如何在此字体中显示表情符号图标？
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 */
}

目录是正确的，正如所述，它们位于同一文件夹中。DevTools没有显示任何错误。格式不是必需的。我没有寻找跨浏览器解决方案。您的字体是正确的。我认为span标记中的字符是错误的。我试过使用ℹ，它工作正常。告诉我您的结果：）它工作正常！但在我看来，你的回答包含了太多的消遣。如果答案更正确，我会接受它。唯一正确的答案是字体不支持该特定字符。我的选项1和2是提醒您。对于跨浏览器，建议如下：）因为我不能对你的帖子发表评论，所以我必须为你展示一些选项。你可以投票赞成/反对我的答案。：）