使用CSS将表情符号的显示方式更改为纯文本格式？

问题描述

如果我在此处输入like等表情符号，您可能会看到彩色的精灵。

如果将其复制并粘贴到Windows Notepad / Notepad ++中，将会看到类似的内容。

如果将其复制并粘贴回另一个文本编辑器，它将正常显示。

我可以在CSS中实现记事本的渲染效果吗？我不希望导出/加载自己的自定义SVG或尽可能使用JS，并且我希望将其粘贴并粘贴到其他应用程序中以正常呈现表情符号，就像记事本一样。

此处How would I change the color of an emoji?的不可接受的响应表示，可以使用尾随\FE0E来修改表情符号，以使用启用文本表示的Unicode Variation Selector 15（VS15）。但是，添加这样的字符会在粘贴粘贴后覆盖其他应用程序中的呈现，这是不希望的。

有一个CSS草案https://github.com/w3c/csswg-drafts/issues/1144提议在CSS中添加font-presentation: auto | text | emoji | text-override | emoji-override，但是自2017年以来该问题就没有解决过，我不知道其他地方是否会继续取得进展。

解决方法

每当拟议的CSS Fonts Module Level 4生效时，这都可以通过CSS轻松实现。请参阅第9.3节，选择文本表示样式：https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop

的font-variant-emoji属性。

同时，这是一种变通办法，它利用CSS generated content is not captured in copy/paste operations这一事实来支持复制和粘贴。不过，这与文本输入之类的控件不兼容。

在CSS中：

.emoji::after {
   display: inline;
   content: '\FE0E';
}

和HTML：

Lorem<span class="emoji">&#x1F393;</span>Ipsum
Lorem<span class="emoji">&#x1F995;</span>Ipsum

这将正确显示毕业帽，但奇怪的是，它还没有恐龙。如果我直接将表情符号复制粘贴到源代码中，这对我来说是行不通的；您需要明确指定代码点，不确定如何工作。

复制粘贴文本不会像我们希望的那样复制粘贴VS15代码点：

Lorem?Ipsum Lorem?︎Ipsum

emoji emoji emoji html unicode