v131 · css

CSS font-variant-emoji

Font-variant-emoji CSS property provides users an easy way to control between colored (emoji-style) and monochromatic (text-style) emoji glyphs presentations. This can be also done by adding an emoji Variation Selector, specifically U+FE0E for text and U+FE0F for emojis, after each emoji codepoint. Using font-variant-emoji CSS property allows web developers

concepts

  1. font-variant-emoji

    font-variant-emoji forces emoji to render as text (monochrome) or as emoji presentation. Per-element override of the platform default.

  2. Dual-presentation glyphs

    The same dual-presentation Unicode characters rendered under all four values side by side, plus a live editor for pasted user content and variation selectors.

  3. Symbol-font / UI glyph

    Live-edit any test string and see all four font-variant-emoji values render it. Real icon-font strip pinned at the bottom.

  4. Chat product

    A live chat composer where a thread inherits a product-wide emoji variant while system notices override back to monochrome text glyphs.

  5. Emoji in text

    Headlines, body copy, and UI button rows toggled through all four values live. Type your own emoji string and see all four variants simultaneously in a preview grid.

  6. Presentation modes comparison

    A full matrix of normal, text, emoji, and unicode across 32 emoji characters in six categories, including composed ZWJ, skin-tone, and flag sequences. Click a value column to highlight it.

why it shipped

There are several ways to achieve control over colored (emoji-style) and monochromatic (text-style) emoji glyphs presentation: using Emoji-specific Variation Selectors or using font-variant-emoji CSS property. Currently font-variant-emoji CSS property is not supported in Chrome issue #1379029 and Variation Selectors are often ignored in Chrome issue #964527.

references