🌏
Windows環境で国旗の絵文字が表示されない

2025/06/21に公開
 問題以下のような、国を選択するUIを作った。
しかし、国旗の絵文字が表示されていない。JP, US, BR…と表示されてしまっている。
調べてみたところ、Windows Chrome（筆者の環境）では国旗の絵文字が表示されないらしい。
https://gigazine.net/news/20250204-flag-emojis-on-windows/

 対策ではどうするか。ChatGPTに聞いたら、3つの解決策を提示してくれた。
それぞれの国旗に対応するPNG/SVG画像を用意する。
ウェブフォントを導入する（例: Noto Color Emoji - fonts.google.com ）
絵文字ライブラリを使う（例: twemoji - github.com ）
1はあまり現実的でないかも。CDNなら読み込みのリクエストが発生するし、自前で持つならメンテしていく必要がある。

3も今回はパス。このためだけにライブラリを入れるのは微妙だ。それに、例示の twemoji の最終更新は数年前だ。
というわけで、2の対策を行う。

 Webフォント導入Webフォントを導入する。
まず、GoogleFontsの指示どおり、HTMLの <head /> タグ内に以下を挿入。
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap" rel="stylesheet">
これでWebフォントが読み込まれる。
次に、国旗部分に以下のCSSを指定。
.flag {
  font-family: "Noto Color Emoji", sans-serif;

  /* 絵文字の表示を最適化 */
  font-variant-emoji: emoji;
  font-feature-settings: normal;
  text-rendering: optimizeLegibility;
}
国旗の絵文字さえ表示されればいいので、いったん HTML 全体への適用はやめておいた。

 結果Webフォントが適用された結果、以下のように問題なく絵文字が表示された🎉
一瞬、JP, US, BR… と表示されるけど、Webフォントだからしょうがない。
問題

対策

Webフォント導入

結果

Discussion
