18.04: o emoji colorido não aparece no Chrome, apenas parcialmente no Firefox

Atualizei de 17.10 para 18.04 e esperava ter melhor suporte para emoji. Os resultados são que o Chrome (66) ainda está usando a antiga fonte emoji em preto e branco e o Firefox (59) está conseguindo mostrar alguns emoji coloridos, mas não outros. Tomei alguns conselhos para instalar a fonte EmojiOne, mas isso não pareceu ajudar 😓

Capturas de tela da página de demonstração emoji em http://eosrei.github.io/emojione-color-font/full-demo.html :

Cromada:

Raposa de fogo:

No Ubuntu 18.04+ agora você pode simplesmente instalar um único pacote: fonts-noto-color-emoji. Depois disso, reinicie o Chrome e ele entrará em vigor. Não há necessidade de criar uma configuração de fonte manual.

^{Este pacote deve ser instalado no ambiente de trabalho normal do Ubuntu 18.04+ (no nível de dependência 'Recomendado' - verifique você mesmo apt rdepends fonts-noto-color-emoji). Alguns outros tipos, como o Kubuntu (KDE), não têm isso por padrão e exigem a instalação manual.}

Corrigi -o - tive que seguir estas instruções a partir de 2016 😧 tive que criar ~/.config/fontconfig/conf.d/01-emoji.confcom o seguinte texto:

<?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>

O bit nas instruções originais sobre a instalação da fonte Noto era desnecessário, pois é instalado como parte do 18.04 por padrão.

Então corra:

fc-cache -f -v

Na próxima reinicialização, o Chrome exibirá emoticons coloridos.

Parece que esse problema pode ser causado por várias fontes emoji incompatíveis instaladas e / ou por uma fonte padrão incorreta selecionada no Chrome.

1. Verifique se você tem o fonts-noto-color-emojipacote instalado.

   sudo apt install fonts-noto-color-emoji
   

2. Crie / edite arquivos de configuração de fontes como na resposta do @ N3dst4 .

   • Nota: Enquanto o @ N3dst4 colocou seu arquivo de configuração ~/.config/fontconfig/conf.d/01-emoji.conf, eu coloquei o meu por ~/.config/font-manager/local.confcausa de como meu sistema está configurado.

   <?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. Defina as fontes padrão no Chrome para variações de "Noto".

4. Reconstrua o cache da fonte + reinicie o chrome.

   fc-cache -f -v
   

5. Se os emojis ainda não forem exibidos corretamente, veja com quais fontes são usadas para renderizá-los right click on emoji -> Inspect -> Computed -> Rendered Fontse desinstalá-los.

   • Exemplo: meus emojis foram renderizados por fonte Twitter Color Emoji, então eu precisava desinstalar o pacote fonts-twemoji-svginot.
   • Talvez você não precise desinstalar fontes se jogar mais com arquivos de configuração de fontes, mas eu não testei isso.
   • Não se esqueça de reconstruir o cache da fonte + reiniciar o chrome após desinstalar as fontes.

Aliás, isso também corrigiu o texto do Zalgo para mim.

Não use essa página de demonstração para testar emoticons coloridos. Essa página demonstra apenas a fonte EmojiOne que não é instalada por padrão no Ubuntu (embora o Firefox use uma variação dela).

Em vez disso, use https://unicode.org/emoji/charts/full-emoji-list.html

Veja a coluna Navegador. No Ubuntu padrão, ele deve corresponder principalmente à coluna do Google. (Exceto pela coluna Navegador, todas as outras colunas são apenas .pngícones). Quando testei hoje, a coluna do Google está um pouco desatualizada, pois o Google fez algumas alterações em alguns dos emojis que não foram incorporados ao site. (Por exemplo, o hambúrguer tem queijo em cima do hambúrguer.)