font-variant-emoji

**font-variant-emoji** CSS 属性指定了显示表情符号的默认呈现样式。

传统上，这是通过在表情符号代码点后附加一个变体选择器来完成的，U+FE0E 用于文本，U+FE0F 用于表情符号。只有列为有助于Unicode 表情符号呈现序列的表情符号受此属性的影响。

语法

css

/* Keyword values */
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

/* Global values */
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;

font-variant-emoji 属性使用下面列表中的单个关键字值指定。

值

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

<p class="nosupport">
  Your Browser does not support <code>font-variant-emoji</code>. This image
  shows how it is rendered with support.
</p>
<img
  class="nosupport"
  src="./font-variant-emoji-example.jpg"
  alt="a telephone emoji show as text, black and white next to a telephone emoji shown as emoji full color and graphical representation" />

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

@supports (font-variant-emoji: emoji) {
  .nosupport {
    display: none;
  }
  .emojis {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .emoji > div {
    font-size: 2rem;
  }
}

@supports not (font-variant-emoji: emoji) {
  .emojis {
    display: none;
  }
}

css

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

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

结果

规范

规范
CSS 字体模块级别 4 # font-variant-emoji-prop

浏览器兼容性

BCD 表格仅在浏览器中加载