최근 Chrome 이모티콘 글꼴 두께 문제에 대한 간단한 솔루션

최근에 Chrome v96 update 에서 platform 이모지가 무색 글리프로 변경된 것을 확인했습니다. 솔직히 말해서 우리는 독창적인 콘텐츠를 만드는 편집자들에게 행동의 자유를 주고 싶었기 때문에 제기된 문제에 대한 빠르고 유효한 솔루션을 찾는 것이 필수가 되었습니다.

때때로, 곧 우리는 범인이 font-weight 속성이라는 것을 발견했습니다. 보다 구체적으로, Chromium 업데이트를 통해 굵은 텍스트는 이모티콘을 일반 글리프처럼 보이게 합니다.

이 문제를 해결하려면 텍스트의 font-weight를 normal 로 변경해야 하지만 태그 내부의 텍스트 부분을 제어할 수 없습니다.

따라서 다음 두 단계를 수행해야 합니다.

1) 텍스트에서 이모티콘을 추출합니다.

2) font-weight: normal, 즉

<span style="font-weight: normal !important">{emoji}</span>

3) 텍스트 내의 모든 이모지를 2단계에서 만든 상대 HTML 태그로 바꿉니다.

여기 우리가 완료했습니다!

import emojiRegex from 'emoji-regex';

function normalizeEmojis(content) {
  const regex = emojiRegex();

  return content.replace(regex, (char) => {
    return `<span style="font-weight: normal !important;">${char}</span>`;
  });
}

응용 프로그램 내에서 정규화된 HTML 콘텐츠를 사용할 수 있습니다.

<div
  className="font-bold text-center"
  dangerouslySetInnerHTML={{
    __html: normalizeEmojis(contentWithEmojis),
  }}
/>

비록 부모div가 볼드체로 설정되어 있지만, 안에 있는 이모티콘은 컬러로 되어있습니다!