最近のChrome絵文字フォントの太さの問題に対する簡単な解決策

2976 ワード
テキストリンク
最近、 Chrome v96 update で、 platform の絵文字が無色のグリフに変わったことに気付きました.ユニークなコンテンツを作成する編集者に行動の自由を与えたいので、提起された問題に対する迅速かつ有効な解決策を見つけることが必要になったため、率直に言って、それは苛立たしいものでした.

ときどき、原因が font-weight プロパティであることがすぐにわかります.より具体的には、Chromium の更新により、太字のテキストにより、絵文字がプレーンなグリフのように見えます.

この問題を解決するには、テキストの font-weight を normal に変更する必要がありますが、タグ内のテキストの部分を制御することはできません.

したがって、いくつかの手順を実行する必要があります.

1) テキストから絵文字を抽出します.

2) それらを font-weight: normal で別の HTML タグにラップします.

<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 は太字に設定されていますが、中の絵文字は色付きです!
pythonソースコードをコンパイルし、pythonスクリプトを暗号化
白駿2156号ワインを味わう