18.04: цветные смайлики вообще не отображаются в Chrome, только частично в Firefox

Я обновился с 17.10 до 18.04 и надеялся получить лучшую поддержку смайликов. В результате Chrome (66) все еще использует старый черно-белый шрифт эмодзи, а Firefox (59) показывает некоторые цветные эмодзи, но не другие. Я взял несколько советов, чтобы установить шрифт EmojiOne, но это не помогло.

Снимки экрана с демонстрационной страницы смайликов по адресу http://eosrei.github.io/emojione-color-font/full-demo.html :

Хром:

Fire Fox:

На Ubuntu 18.04+ теперь вы можете просто установить один пакет: fonts-noto-color-emoji. После этого перезапустите Chrome, и он вступит в силу. Нет необходимости создавать ручную настройку шрифта.

^{Предполагается, что этот пакет устанавливается на обычную версию рабочего стола Ubuntu 18.04+ (на уровне «Рекомендуемый» - проверьте сами apt rdepends fonts-noto-color-emoji). Некоторые другие версии, такие как Kubuntu (KDE), не имеют этого по умолчанию и требуют установки вручную.}

Я исправил это - я должен был следовать этим инструкциям с 2016 года 😧 я должен был создать ~/.config/fontconfig/conf.d/01-emoji.confсо следующим текстом:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>Noto Color Emoji</family>
    </prefer>
  </alias>
</fontconfig>

Бит в оригинальной инструкции по установке шрифта Noto был ненужным, поскольку по умолчанию он установлен как часть 18.04.

Затем запустите:

fc-cache -f -v

При следующей перезагрузке Chrome имеет цвет Emoji.

Кажется, эта проблема может быть вызвана наличием нескольких несовместимых шрифтов emoji и / или неправильным шрифтом по умолчанию, выбранным в Chrome.

1. Убедитесь, что у вас установлен fonts-noto-color-emojiпакет.

   sudo apt install fonts-noto-color-emoji
   

2. Создайте / отредактируйте файлы конфигурации шрифта, как в ответе @ N3dst4 .

   • Примечание: хотя @ N3dst4 вставил его файл конфигурации ~/.config/fontconfig/conf.d/01-emoji.conf, я вставил его ~/.config/font-manager/local.confиз-за того, как настроена моя система.

   <?xml version="1.0" encoding="UTF-8"?>
   <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
   <fontconfig>
     <alias>
       <family>serif</family>
       <prefer>
         <family>Noto Color Emoji</family>
       </prefer>
     </alias>
     <alias>
       <family>sans-serif</family>
       <prefer>
         <family>Noto Color Emoji</family>
       </prefer>
     </alias>
     <alias>
       <family>monospace</family>
       <prefer>
         <family>Noto Color Emoji</family>
       </prefer>
     </alias>
   </fontconfig>
   

3. Установите шрифты по умолчанию в Chrome для вариантов «Noto».

4. Перестройте кэш шрифтов + перезапустите Chrome.

   fc-cache -f -v
   

5. Если эмодзи по-прежнему отображаются неправильно, посмотрите, какие шрифты используются для их рендеринга, right click on emoji -> Inspect -> Computed -> Rendered Fontsи удалите их.

   • Пример: мои эмоджи были отрисованы шрифтом Twitter Color Emoji, поэтому мне нужно было удалить пакет fonts-twemoji-svginot.
   • Вам может не понадобиться удалять шрифты, если вы больше играете с файлами конфигурации шрифтов, но я этого не проверял.
   • Не забудьте перестроить кэш шрифтов + перезапустить Chrome после удаления шрифтов.

Кстати, это также исправило текст Zalgo для меня.

Не используйте эту демонстрационную страницу для проверки цвета эмодзи. На этой странице показан только шрифт EmojiOne, который по умолчанию не установлен в Ubuntu (хотя Firefox использует его вариант).

Вместо этого используйте https://unicode.org/emoji/charts/full-emoji-list.html

Посмотрите на столбец Браузер. В Ubuntu по умолчанию он должен в основном соответствовать столбцу Google. (За исключением столбца «Обозреватель», все остальные столбцы являются просто .pngзначками). Когда я тестировал сегодня, колонка Google просто немного устарела, поскольку Google внесла некоторые изменения в некоторые из своих смайликов, которые не были включены в веб-сайт. (Например, у гамбургера есть сыр сверху гамбургера.)