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: 允许浏览器选择如何显示表情符号。这通常遵循操作系统的设置。
文本: 以仿佛使用了 Unicode 文本变体选择符（U+FE0E）的方式渲染表情符号。
emoji: 以仿佛使用了 Unicode 表情符号变体选择符（U+FE0F）的方式渲染表情符号。
unicode: 根据表情符号呈现属性渲染表情符号。如果存在 U+FE0E 或 U+FE0F 变体选择符，则它将覆盖此值设置。

正式定义

初始值	`normal`
应用于	所有元素和文本。它也适用于 `::first-letter` 和 `::first-line`。
继承性	是
计算值	同指定值
动画类型	离散

正式语法

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

无障碍

虽然使用表情符号可能很有趣，但您应该考虑它们对可访问性的影响，特别是对于有视觉和认知障碍的用户。在使用表情符号时，请考虑以下因素：

屏幕阅读器上的显示：屏幕阅读器将朗读表情符号的 alt 文本。请记住这一点，以考虑表情符号在内容中的位置。重复和过度使用表情符号会对屏幕阅读器用户产生不利影响。使用表情符号比使用颜文字更好；颜文字将被读作标点符号。
与背景的对比：使用表情符号时，请考虑它们的颜色以及它们与背景颜色如何搭配，特别是如果您的背景颜色会变化（例如亮/暗模式）。
使用意图：不要使用表情符号来替换单词，因为您对表情符号含义的理解可能与用户的不同。还要考虑到表情符号在不同的文化和地理区域可能具有不同的含义。我们的建议是最好将使用限制在普遍已知的表情符号。

示例

改变表情符号的显示方式

此示例演示了如何以 text 或 emoji 呈现方式渲染表情符号。

HTML

<p class="no-support">
  Your Browser does not support <code>font-variant-emoji</code>. This image
  shows how it is rendered with support.
</p>
<img
  class="no-support"
  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) {
  .no-support {
    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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后由 MDN 贡献者于 2025 年 7 月 14 日修改。

在 GitHub 上查看此页面 • 报告此内容的问题