Как использовать шрифт @ font-face с шрифтом Noto Emoji по символьным ссылкам?

У меня есть два локальных файловКак использовать шрифт @ font-face с шрифтом Noto Emoji по символьным ссылкам?

index.html 
NotoEmoji-Regular.ttf

Я скачал NotoEmoji-Regular.ttf от google.com/get/noto/.

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 в Emoji. Используя Chrome DevTools (F12 в Chrome), он говорит, что имеет правильный шрифт Noto Emoji Regular.

Как отобразить значок Emoji из этого шрифта?

источник

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

Ваш шрифт правильный. Я думаю, что символ в теге span ошибочен. Я пытался с & # x2139, он работает нормально. Расскажите мне о своем результате :) – WorkWe

См. Мой обновленный ответ выше :) – WorkWe

Как использовать шрифт @ font-face с шрифтом Noto Emoji по символьным ссылкам?

ответ

Смежные вопросы