18.04: los emoji de color no se muestran en Chrome, solo parcialmente en Firefox

He actualizado de 17.10 a 18.04 y esperaba tener un mejor soporte de emoji. Los resultados son que Chrome (66) todavía está usando la antigua fuente de emoji en blanco y negro, y Firefox (59) está logrando mostrar algunos emoji de color pero no otros. Tomé algunos consejos para instalar la fuente EmojiOne pero eso no pareció ayudar 😓

Capturas de pantalla de la página de demostración de emoji en http://eosrei.github.io/emojione-color-font/full-demo.html :

Cromo:

Firefox

En Ubuntu 18.04+ ahora puede simplemente instalar un solo paquete: fonts-noto-color-emoji. Después de eso, reinicie Chrome y surtirá efecto. No es necesario crear una configuración de fuente manual.

^{Se supone que este paquete debe instalarse en la versión de escritorio habitual Ubuntu 18.04+ (en un nivel de dependencia 'Recomendado', compruebe usted mismo con apt rdepends fonts-noto-color-emoji). Algunos otros sabores como Kubuntu (KDE) no tienen esto por defecto y requieren que lo instales manualmente.}

Lo arreglé, tuve que seguir estas instrucciones desde 2016 😧 Tuve que crear ~/.config/fontconfig/conf.d/01-emoji.confcon el siguiente 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>

El bit en las instrucciones originales sobre la instalación de la fuente Noto era innecesario ya que está instalado como parte de 18.04 por defecto.

Entonces corre:

fc-cache -f -v

En el próximo reinicio, Chrome tiene emoji de color.

Parece que este problema puede ser causado por tener múltiples fuentes de emoji incompatibles instaladas y / o tener una fuente predeterminada incorrecta seleccionada en Chrome.

1. Asegúrese de tener el fonts-noto-color-emojipaquete instalado.

   sudo apt install fonts-noto-color-emoji
   

2. Cree / edite archivos de configuración de fuente como en la respuesta de @ N3dst4 .

   • Nota: Si bien @ N3dst4 colocó su archivo de configuración ~/.config/fontconfig/conf.d/01-emoji.conf, lo hice ~/.config/font-manager/local.confpor cómo está configurado mi sistema.

   <?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. Establezca las fuentes predeterminadas en Chrome a las variaciones de "Noto".

4. Reconstruir caché de fuentes + reiniciar Chrome.

   fc-cache -f -v
   

5. Si los emojis aún no se muestran correctamente, vea qué fuentes se utilizan para representarlos right click on emoji -> Inspect -> Computed -> Rendered Fontsy desinstálelos.

   • Ejemplo: mis emojis se representaron por fuente Twitter Color Emoji, por lo que necesitaba desinstalar el paquete fonts-twemoji-svginot.
   • Es posible que no necesite desinstalar las fuentes si juega más con los archivos de configuración de fuentes, pero no lo he probado.
   • No olvides reconstruir el caché de fuentes + reiniciar Chrome después de desinstalar las fuentes.

Por cierto, esto también solucionó el texto de Zalgo para mí.

No use esa página de demostración para probar emoji de color. Esa página solo muestra la fuente EmojiOne que no está instalada por defecto en Ubuntu (aunque Firefox usa una variación de la misma).

En su lugar, use https://unicode.org/emoji/charts/full-emoji-list.html

Mira la columna del navegador. En Ubuntu predeterminado, debería coincidir principalmente con la columna de Google. (Excepto por la columna Navegador, todas las demás columnas son solo .pngiconos). Cuando probé hoy, la columna de Google está un poco desactualizada ya que Google ha realizado algunos cambios en algunos de sus emoji que no se han incorporado al sitio web. (Por ejemplo, la hamburguesa tiene queso encima de la hamburguesa).