18.04 : Chrome에서 색상 이모티콘이 전혀 표시되지 않고 Firefox에서만 일부만 표시됨

17.10에서 18.04로 업그레이드했으며 더 나은 이모티콘 지원을 원했습니다. 결과적으로 Chrome (66)은 여전히 ​​오래된 흑백 이모티콘 글꼴을 사용하고 Firefox (59)는 일부 색상 이모티콘 은 표시 하지만 다른 색상 이모티콘 은 표시 하지 않습니다. 글꼴 EmojiOne을 설치하는 데 조언을했지만 도움이되지 않는 것 같습니다.

http://eosrei.github.io/emojione-color-font/full-demo.html 의 이모티콘 데모 페이지 스크린 샷 :

크롬:

Firefox :

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에 색상 이모티콘이 있습니다.

이 문제는 호환되지 않는 이모티콘 글꼴이 여러 개 설치되어 있거나 Chrome에서 기본 글꼴이 잘못 선택되어 발생할 수 있습니다.

1. fonts-noto-color-emoji패키지가 설치되어 있는지 확인하십시오 .

   sudo apt install fonts-noto-color-emoji
   

2. @ N3dst4 's answer 에서와 같이 글꼴 구성 파일을 작성 / 편집하십시오 .

   • 참고 : @ 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. 글꼴 캐시를 다시 빌드하고 크롬을 다시 시작하십시오.

   fc-cache -f -v
   

5. 그림 이모티콘이 여전히 올바르게 표시되지 않으면 어떤 글꼴을 사용하여 렌더링 right click on emoji -> Inspect -> Computed -> Rendered Fonts하고 제거 했는지 확인하십시오 .

   • 예 : 이모티콘이 font로 렌더링 Twitter Color Emoji되었으므로 package를 제거해야했습니다 fonts-twemoji-svginot.
   • 글꼴 구성 파일로 더 많이 재생하는 경우 글꼴을 제거하지 않아도되지만 테스트하지는 않았습니다.
   • 글꼴을 제거한 후 글꼴 캐시를 다시 작성하고 크롬을 다시 시작하는 것을 잊지 마십시오.

BTW 이것은 또한 Zalgo 텍스트 를 수정 했습니다 .

해당 데모 페이지를 사용하여 색상 이모티콘을 테스트하지 마십시오. 이 페이지는 Ubuntu에 기본적으로 설치되지 않은 EmojiOne 글꼴 만 보여줍니다 (Firefox는 변형을 사용하지만).

대신 https://unicode.org/emoji/charts/full-emoji-list.html을 사용 하십시오.

브라우저 열을보십시오. 기본 우분투에서는 대부분 Google 열과 일치해야합니다. 브라우저 열을 제외하고 다른 모든 열은 .png아이콘 일뿐 입니다. 오늘 테스트 한 결과 Google에서 웹 사이트에 포함되지 않은 일부 이모티콘을 일부 변경 했으므로 Google 항목이 약간 오래되었습니다. 예를 들어 햄버거에는 햄버거 위에 치즈가 있습니다.