CSS - font-variant-emoji

• トップ
• CSSリファレンス
• font-variant-emoji

概要

説明

絵文字の中には下記にあげられているようにテキストタイプと絵文字タイプの表現を持つものがあります。

• Emoji Presentation Sequences

文字の後に 異体字セレクタ(U+FE0E) をつけるとテキストタイプ、異体字セレクタ(U+FE0F)をつけると絵文字タイプになります。

font-variant-emoji を指定することにより、異体字セレクタを使用せず表示を切り替えることができます。

normal

ブラウザの実装に任せます。

text

テキストタイプで表示します。U+FE0E を追加するのと同様の表示となります。

emoji

絵文字タイプで表示します。U+FE0F を追加するのと同様の表示となります。

unicode

Unicode で決められたデフォルトタイプで表示します。詳細は Unicode の Presentation Style(↗) を参照してください。

サンプル

.fve-normal { font-variant-emoji: normal; }
.fve-text { font-variant-emoji: text; }
.fve-emoji { font-variant-emoji: emoji; }
.fve-unicode { font-variant-emoji: unicode; }

<div class="fve-normal">&#x260E; ... normal</div>
<div class="fve-text">&#x260E; ... text</div>
<div class="fve-emoji">&#x260E; ... emoji</div>
<div class="fve-unicode">&#x260E; ... unicode</div>

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/font-variant-emoji
• https://drafts.csswg.org/css-fonts/#font-variant-emoji-prop