Noto Emojiフォントで@ font-faceを文字参照で使用するにはどうすればよいですか？

私はgoogle.com/get/noto/からNotoEmoji-Regular.ttfをダウンロードした2つのローカルファイルNoto Emojiフォントで@ font-faceを文字参照で使用するにはどうすればよいですか？

index.html 
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というフォントが含まれています。

このフォントから絵文字アイコンを表示するにはどうすればよいですか？

出典

2016-05-19 bzeaman

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

出典

2016-05-19 15:15:13 WorkWe

ディレクトリが正しいことを、彼らは同じフォルダ内にある述べたように。 DevToolsはエラーを表示しません。フォーマットは必要ありません。私はクロスブラウザソリューションを探していません。 – bzeaman

あなたのフォントフェイスは正しいです。私はスパンタグの文字が間違っていると思います。私は＆＃x2139で試してみましたが、うまくいきます。あなたの結果について教えてください:) – WorkWe

上記の私の更新された答えを見てください:) – WorkWe

Noto Emojiフォントで@ font-faceを文字参照で使用するにはどうすればよいですか？

答えて

関連する問題