font-variant-emoji

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

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

構文

css
/* キーワード値 */
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

/* グローバル値 */
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;

font-variant-emoji プロパティは、下記の一覧から 1 つのキーワード値を使用して指定します。

normal

ブラウザーが絵文字を表示する方法を選べます。これは多くの場合、オペレーティングシステムの設定に従います。

text

Unicode テキスト変化形セレクター (U+FE0E) を使用しているかのように絵文字を描画します。

emoji

Unicode 絵文字変化形セレクター (U+FE0F) を使用しているかのように絵文字を描画します。

unicode

絵文字の表示プロパティに従って絵文字を表示します。U+FE0E または U+FE0F の変化形セレクターが存在する場合、この値の設定を上書きします。

公式定義

初期値normal
適用対象すべての要素とテキスト。 ::first-letterおよび::first-line にも適用されます。
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

font-variant-emoji = 
normal |
text |
emoji |
unicode

絵文字の表示方法の変更

この例は絵文字を text または emoji で表示する方法を示しています。

HTML

html
<section class="emojis">
  <div class="emoji">
    <h2>text presentation</h2>
    <div class="text-presentation">☎</div>
  </div>
  <div class="emoji">
    <h2>emoji presentation</h2>
    <div class="emoji-presentation">☎</div>
  </div>
</section>

CSS

css
.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}

結果

アクセシビリティの考慮

絵文字を使用することは楽しいように思えるかもしれませんが、アクセシビリティ、特に視覚や認知に障害のあるユーザーへの影響を考慮する必要があります。絵文字を使用する際には、以下の要素を考慮してください。

  • スクリーンリーダーへの表示: スクリーンリーダーは絵文字の代替テキストを読み上げます。このことを念頭に置いて、コンテンツ内での絵文字の位置を検討してください。絵文字を繰り返し多用すると、スクリーンリーダーのユーザーに悪影響があります。顔文字よりも絵文字を使用する方が良いでしょう。顔文字は句読点として読み上げられます。

  • 背景とのコントラスト: 絵文字を使用する場合、その色と背景色との作用を考えてください。特に、ライト/ダークモードなど、背景色が変化する可能性がある場合は注意が必要です。

  • 使用する意図: 絵文字の意味の理解がユーザーと異なる可能性があるため、絵文字を言葉に置き換えて使用しないでください。また、絵文字は文化や地域によって異なる意味を持つ場合があることも考慮してください。できれば、一般的に知られている絵文字に使用を制限することを推奨します。

仕様書

Specification
CSS Fonts Module Level 4
# font-variant-emoji-prop

ブラウザーの互換性

BCD tables only load in the browser

関連情報