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 上檢視此頁面 • 報告此內容的問題