Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

font-variant-emoji

font-variant-emoji は CSS のプロパティで、絵文字の表示についての既定の表現を指定します。

従来は、変化形セレクター（テキストの場合は U+FE0E、絵文字の場合は U+FE0F）をこの点に付加することで行われていました。このプロパティの影響を受けるのは、Unicode emoji presentation sequence に掲載されている絵文字だけです。

絵文字スタイル表示制御

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
font-variant-emoji
131
131
141
17.5
131
17.5
emoji
131
131
141
131
normal
131
131
141
131
text
131
131
141
131
unicode
131
131
141
131
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります
注釈 1件
実験的機能
  • ブラウザの実験的フラグを有効にする必要があります

基本構文

CSS 
.emoji-color {
  font-variant-emoji: emoji;
}
.emoji-text {
  font-variant-emoji: text;
}
.emoji-default { font-variant-emoji: unicode; }

ライブデモ

Emoji(col-)

CSS Emoji(col-) demo.

プレビュー全画面表示

Text(text)

CSS Text(text) demo.

プレビュー全画面表示

Unicode(default)

CSS Unicode(default) demo.

プレビュー全画面表示

実務での使いどころ

  • 絵文字の一貫した表示制御

    印刷用スタイルシートで絵文字をテキスト表示に切り替え、モノクロ印刷でも正しく表示されるようにします。

注意点

  • Safariでは未対応のため、絵文字の表示をOSのデフォルトに依存するフォールバックを想定してください。

アクセシビリティ

  • 絵文字をテキスト表示に切り替えても、スクリーンリーダーは通常の絵文字名で読み上げます。重要な情報を絵文字だけで伝えないでください。

参考リンク