网页与 HTML

表情符号呈现

通常使用变体选择符16(U+FE0F)将字符渲染为彩色表情符号字形,部分字符默认以表情符号呈现,其他则默认以文本呈现。

· Updated

What Is Emoji Presentation?

Emoji presentation is the default rendering style for a Unicode character that has both an emoji form and a text form. When a character has emoji presentation as its default, software renders it as a colorful, pictographic glyph — the kind you see in messaging apps and social media — rather than as a monochrome text symbol.

Many characters exist in both forms. For example, U+2764 HEAVY BLACK HEART can appear as a plain black heart (text presentation) or as a vivid red heart emoji (emoji presentation), depending on the default and any variation selectors applied.

The Unicode Emoji Presentation Property

Unicode assigns each character one of three values for the Emoji_Presentation property:

  • Emoji_Presentation = Yes: The character defaults to emoji rendering. Most modern emoji (😀 🎉 🌍) fall here.
  • Emoji_Presentation = No: The character defaults to text rendering but can be forced to emoji rendering with VS16 (U+FE0F).
  • Text characters: Characters with no emoji form at all.

You can look up a character's emoji presentation status in the Unicode emoji-data.txt data file.

Variation Selectors

Two variation selectors control presentation:

  • U+FE0E (VS15, TEXT VARIATION SELECTOR): Forces text (monochrome) rendering.
  • U+FE0F (VS16, EMOJI VARIATION SELECTOR): Forces emoji (colorful) rendering.
U+2764           ❤   (platform-dependent default — often text)
U+2764 U+FE0F   ❤️  (forced emoji presentation)
U+2764 U+FE0E   ❤   (forced text presentation)

U+2614           ☔   (defaults to emoji on most platforms)
U+2614 U+FE0E   ☔   (forced text)

Why It Matters

Presentation affects:

  1. Visual consistency: A heart emoji on iOS may look different from Android, but both are color emoji. The text form is always monochrome.
  2. Font rendering: Emoji use color font formats (CBDT, SBIX, COLRv1); text uses conventional outlines. Mixing them can cause alignment issues.
  3. Copy-paste behavior: Applications may strip or preserve variation selectors, changing the presentation when text moves between systems.
  4. Screen reader behavior: Some screen readers announce emoji by name (🙂 = "slightly smiling face") and may treat text presentation differently.
  5. Search and matching: A ❤️ (with VS16) and ❤ (without) are technically different byte sequences.

Code Examples

# U+2764 with and without emoji variation selector
heart_text  = "\u2764"         # ❤ (bare, often text on macOS)
heart_emoji = "\u2764\uFE0F"  # ❤️ (emoji presentation)
heart_force_text = "\u2764\uFE0E"  # ❤ (text presentation)

len(heart_emoji)  # 2 (two code points)

# Check if string ends with emoji variation selector
heart_emoji[-1] == "\uFE0F"  # True

# Removing variation selectors
import unicodedata
def strip_vs(s):
    return "".join(c for c in s if c not in ("\uFE0E", "\uFE0F"))

strip_vs("❤️")  # "❤"
// JavaScript
const heartEmoji = "\u2764\uFE0F";  // ❤️
const heartText  = "\u2764\uFE0E";  // ❤

heartEmoji.length;  // 2
[...heartEmoji];    // ["❤", "️"] — two code points

Emoji in HTML

<!-- Direct: browser uses default presentation -->
<span>&#x2764;</span>       <!-- ❤ — depends on OS/browser -->

<!-- Forced emoji presentation via variation selector -->
<span>&#x2764;&#xFE0F;</span>  <!-- ❤️ -->

<!-- CSS approach: emoji font stack ensures color rendering -->
<span style="font-family: 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;">
  &#x2764;
</span>

Quick Facts

Property Value
Unicode property Emoji_Presentation
Emoji VS U+FE0F (forces colorful rendering)
Text VS U+FE0E (forces monochrome rendering)
Default emoji chars ~1,400+ in Unicode 15
Color font formats CBDT/CBLC, SBIX, COLRv0/v1
Platform variation Emoji glyph designs differ per platform (Apple, Google, Twitter)
ZWJ sequences Many emoji are composed with Zero Width Joiner (U+200D)

相关术语

网页与 HTML 中的更多内容