CSS3

プロパティ

font-variant-emoji

[Edge]⛌？。→●、mdn

フォントのテキスト／絵文字の選択。

このプロパティは、web 作者が、ある種の絵文字符号位置用に［絵文字呈示、テキスト呈示］のどっちを利用するか選定できるようにする。これらの呈示スタイルは、伝統的に、ある種の符号位置に異体選択子［ U+FE0E VARIATION SELECTOR-15 ／ U+FE0F VARIATION SELECTOR-16 ］を付加することにより選定されていた。font-variant-emoji は、web 作者が、異体選択子の代わりになる既定の呈示スタイルを設定できるようにする。

このプロパティが影響する符号位置は、Unicode にて［ Unicode emoji Presentation Sequence【“Unicode 絵文字呈示列”】に寄与するものとして、挙げられているもの］に限られる。この仕様においては、これらの文字は、呈示に関与する絵文字符号位置（ Emoji Presentation Participating Code Points ）と総称される。このプロパティには、他のどの文字に対しても効果は無い。【呈示に関与する符号位置、という似た用語も現れるが、おそらく、この用語の略称を意図している（更に広い分類とも受け取れそうだが）。】

このプロパティは、フォント フォールバックに影響するものと予期される。しかしながら、フォント フォールバックと font-variant-emoji との相互作用の正確な資質は、明示的に未指定である。しかしながら、異体選択子は ― § クラスタ照合にて定義されるように ― その前にあるクラスタ内に含めるものとする。したがって、異体選択子は、フォント フォールバックに際し、副次的データとして扱われることになる。このふるまいによる自然な結果として、異体選択子は、その前にある文字と異なるフォントで描画されてはならないことになる。

font-variant-emoji が利用されたとしても、要素の内容に異体選択子［ U+FE0E VARIATION SELECTOR-15 ／ U+FE0F VARIATION SELECTOR-16 ］が在るならば、font-variant-emoji 内に指定された描画を上書きする。したがって、font-variant-emoji は、テキストが描画されるとき任意で外せるような、既定の呈示を設定する。

注記： 絵文字呈示連列をどう取り扱うかは、プラットフォームごとに異なる規約がある。複数のプラットフォームをサポートするユーザー エージェントは、個々のプラットフォームごとに、その規約に従いたいと望むこともあれば、どのプラットフォームにも同じアプローチを利用したいと望むこともあろう。ユーザー エージェントは、絵文字スタイルの描画を要請されたとき、色テーブルを含まないフォントは無視することにしたいと望むこともあれば、どのクラスタにも機械的に同じクラスタ フォールバック アルゴリズムを利用したいと望むこともあろう。

［U+FE0E VARIATION SELECTOR-15、U+FE0F VARIATION SELECTOR-16］以外の異体選択子は、フォント選定に影響しないものとする ― 在ったとしても、それまでに選定されたフォントが それをサポートしないならば、無視される。

［lang／xml:lang］属性が受容する［BCP47 による［言語タグに対する -u- 拡張］］は、ユーザー エージェントがある特定の文字用に［絵文字、テキスト］どちらの呈示を利用するか裁定するときには、考慮されるべきでない。

以下のCSSが組み込んであります：

auto

ユーザー エージェントは、呈示に関与する符号位置を［絵文字スタイル、テキスト スタイル］どちらで描くことも選べる。ユーザー エージェントは、この裁定を遂行するときには、概してプラットフォーム規約に従う。

<SPAN style="font-family:Test_Font; font-size:30px;
">ABCabc012&#x1F6CB;&#x1f0a1;</SPAN><BR>

指定なし

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-emoji:auto;
">ABCabc012&#x1F6CB;&#x1f0a1;</SPAN><BR>

text

符号位置列は、どの呈示に関与する符号位置にも U+FE0E VARIATION SELECTOR-15 が付加されていたかのように描画される。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-emoji:text;
">ABCabc012&#x1F6CB;&#x1f0a1;</SPAN><BR>

¶

emoji

符号位置列は、どの呈示に関与する符号位置にも U+FE0F VARIATION SELECTOR-16 が付加されていたかのように描画される。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-emoji:emoji;
">ABCabc012 !&#x22;&#x1F6CB;&#x1f0a1;</SPAN><BR>

¶

unicode

符号位置列は、[UTS51] に則って描画される ― 各 呈示に関与する符号位置用の［Emoji、Emoji_Presentation］プロパティの値に依存して、［絵文字を既定とする（emoji-default）／テキストを既定とする（text-default）／テキストのみ（text-only）］のいずれかとして。［U+FE0E VARIATION SELECTOR-15／U+FE0F VARIATION SELECTOR-16］は、在るならば、個々の呈示に関与する符号位置の既定の呈示を上書きすることになる。

<SPAN style="font-family:Test_Font; font-size:30px;
 font-variant-emoji:unicode;
">ABCabc012&#x270f;&#x2614;&#x1f60e;</SPAN><BR>

<SPAN style="font-family:ＭＳ ゴシック; font-size:30px;
 font-variant-emoji:unicode;
">ABCabc012&#x270f;&#x2614;&#x1f60e;</SPAN><BR>

<SPAN style="font-family:Webdings; font-size:30px;
 font-variant-emoji:unicode;
">ABCabc012&#x270f;&#x2614;&#x1f60e;</SPAN><BR>

@font-face {
  font-family: "Custom Emoji";
  src: url("CustomEmoji.ttf") format("truetype");
}
...
<div style="font-family: 'Custom Emoji'; font-variant-emoji: emoji;">
  &#x1F6CB; <!-- 🛋 -->
</div>

テスト