font-variant-emoji
絵文字をカラー表示（emoji）にするかテキスト表示（text）にするか、またはUnicodeのデフォルト（unicode）に従うかを制御するプロパティです。同じ絵文字コードポイントでも、カラフルな絵文字として表示するか、モノクロのテキスト記号として表示するかを選択できます。
概要
絵文字をカラー表示（emoji）にするかテキスト表示（text）にするか、またはUnicodeのデフォルト（unicode）に従うかを制御するプロパティです。同じ絵文字コードポイントでも、カラフルな絵文字として表示するか、モノクロのテキスト記号として表示するかを選択できます。
対応ブラウザ
デスクトップ
Chrome 131+
Edge 131+
Safari 未対応
Firefox 141+
モバイル
Chrome Android 131+
Safari iOS 未対応
Firefox Android 141+
基本構文
CSS
.emoji-color {
font-variant-emoji: emoji;
}
.emoji-text {
font-variant-emoji: text;
}
.emoji-default { font-variant-emoji: unicode; }実務での使いどころ
-
絵文字の一貫した表示制御
印刷用スタイルシートで絵文字をテキスト表示に切り替え、モノクロ印刷でも正しく表示されるようにします。
注意点
- Safariでは未対応のため、絵文字の表示をOSのデフォルトに依存するフォールバックを想定してください。
アクセシビリティ
- 絵文字をテキスト表示に切り替えても、スクリーンリーダーは通常の絵文字名で読み上げます。重要な情報を絵文字だけで伝えないでください。