Windows の Chrome, Microsoft Edge の最新版で一部の絵文字がモノクロ（白黒）になってしまう問題の対応策

November 25, 2021

現在（2021/11/25）、Windows の Chrome と Microsoft Edge (どちらもバージョン 96) の Chromium ベースのブラウザで、絵文字が白黒（モノクロ）になる現象が起きています。全部の絵文字が白黒になるのではなく、font-weight が 600 以上のスタイルの入ったテキスト内の絵文字が白黒で表示されてしまいます。これは Chromium のバグのようで Issue も立っていました。

Issue 1266022: Emoji rendering lost color in Chrome 96

結構ピンポイントなバグですが、僕もまさにこの問題にぶち当たりました。少し調べたら他にも困っている人はいるようです。太字のフォントで起きるので何かのタイトルとかに絵文字を入れている場合は白黒になってしまいますね。

対処方法

さて、これをどうやって対応するか。バグ登録もされているので Chromium のアップデートを待つしかないという感じでしたが、先程の Issue の最後の方のコメントに一時的な回避方法を書いてくれている人がいましたので試してみました。

https://bugs.chromium.org/p/chromium/issues/detail?id=1266022#c29

Possible workaround: define font-weight 500 for the bold text, but supply it with bold woff file (from weight 700, for instance, not from original 500).

なるほど、@font-face を使って太字のフォントを font-weight: 500 で表示させるようにすればいいんですね。これは天才。僕の場合、英数字は Google Fonts の Open Sans 、日本語フォントはメイリオを使う設定にしていたので、その場合はこのように @font-face を CSS に定義します。

Google Fonts は使いたい太字フォントをローカルにダウンロードして、それを @font-face で使うようにしてください。

/* Google Fonts */
@font-face {
  font-family: "Open Sans Fix";
  /* Open Sans Bold のフォントファイルを指定 */
  src: url("../fonts/OpenSans-Bold.ttf") format("truetype");
  font-style: normal;
  /* それを font-weight: 500 で使う  */
  font-weight: 500;
}

/* ローカルフォント */
@font-face {
  font-family: "Meiryo Fix";
  /* Meiryo Bold のフォントファイルを指定 */
  src: local(Meiryo-Bold);
  font-style: normal;
  /* それを font-weight: 500 で使う  */
  font-weight: 500;
}

そして、ここで登録したフォントを問題が起きている箇所の font-family に指定して、font-weight: 500 にすればオッケーです。ただ全適用すると問題の起きてない Mac などでもフォントが 500 になってしまうので、できれば何らかの方法で Windows だけ適用するようにした方がいいです。

.is-windows .target {
  font-family: "Open Sans Fix", Hiragino Sans, "Meiryo Fix", Helvetica, Arial, sans-serif;
  font-weight: 500;
}

Demo

デモ作りました。Windows Chrome か Edge で見ていただけるとこの対応をした分だけは絵文字がカラーで表示されていることが確認できます。（デモでは Google Fonts は使っていません）

https://codepen.io/johnykei/pen/WNEqazB

ただこの対応はあくまで一時的な回避方法ですので、Chromium がアップデートされて早くこの問題が解決されることを願います 🙏