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 to select between emoji style (colored) emoji presentation, text style (monochromatic) emoji presentation and unicode default emoji presentation [0]. This property only affects emojis that are part of a Unicode emoji presentation sequence [1]. [0] https://www.unicode.org/reports/tr51/tr51-25.html#Emoji_Presentation [1] http://www.unicode.org/emoji/charts/emoji-variants.html
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. There has been a lot of discussion about the emoji presentation issues in Chrome among web developers. Salesforce web developer Nolan Lawson shares the struggles of controlling emoji presentation in the article [0]. Ollie Williams also expressed interest in emoji presentation control in the blog post [1]. Chris Coyier, co-founder of codepen, shared the struggles with emoji presentations in the blog post [2]. Alibaba developer 一丝 also shared struggles with using emojis in chrome in the blog post [3]. ByteDance developer ChangSeok Oh has been interested in this feature, ChangSeok posted an Intent to Prototype in blink-dev group. The improvement over emoji presentation control will also fix several long standing issues with combined 61 stars, see the issues #964527, #1379029, #771508, #1480245. [0] https://nolanlawson.com/2022/04/08/the-struggle-of-using-native-emoji-on-the-web/ [1] https://fullystacked.net/posts/using-emoji-on-the-web/ [2] https://front-end.social/@chris [3] https://x.com/yisibl/status/182684156646
Samples: https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-emoji