使用 CSS 将表情符号的呈现方式更改为纯文本？答案

【问题标题】：Change the presentation of emojis to be plain-text-like with CSS?使用 CSS 将表情符号的呈现方式更改为纯文本？
【发布时间】：2021-01-18 04:05:35
【问题描述】：

如果我在这里输入 ???????? 之类的表情符号，您可能会看到彩色精灵。

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

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

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

此处不接受的回复How would I change the color of an emoji? 表示可以修改带有结尾\FE0E 的表情符号，以使用支持文本呈现的Unicode 变体选择器15 (VS15)。但是，添加这样的字符会在复制粘贴后覆盖其他应用程序中的呈现，这是不可取的。

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

【问题讨论】：

我尝试过的事情：1. 谷歌搜索（我可能使用了错误的查询） 2. 将字体设置为类似 Lucida Console。我发现的最佳替代方案是用不模糊的阴影替换整个表情符号，这无法保留可爱的细节，如恐龙可爱的圆点眼和眼镜。这就是bram.us/2016/10/06/… 的例子，但例如他们的火箭的火力与船的轮廓混淆了。
所以与this无关
感谢重新打开，自从了解了 Unicode VS15 和提议的字体呈现 CSS 添加以来，我已经用知识扩展了这个问题。我仍然没有很好的解决方案。

标签： html css unicode emoji

【解决方案1】：

只要提议的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

【讨论】：

自从我关注网络工作组以来已经快十年了，所以如果有人想更新/修改我的回答，描述这个故事在未来几年的实际情况，将不胜感激.
我不知道 HTML 是否真的应该支持这种 hack 或者这是未定义的行为。从逻辑上讲，我希望一个元素的文本与另一个元素的文本隔离开来，尽管 inline 在语义上可能实际上意味着“我们所有的文本都是连接的”。