时间戳

首页 > 解决方案 > 使用 CSS 将表情符号的呈现方式更改为纯文本？

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

问题描述

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

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

记事本中的恐龙和毕业帽

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

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

此处不接受的回复如何更改表情符号的颜色？评论说，可以修改带有尾随的表情符号\FE0E以使用启用文本呈现的 Unicode 变体选择器 15 (VS15)。但是，添加这样的字符会在复制粘贴后覆盖其他应用程序中的呈现，这是不可取的。

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

标签： htmlcssunicodeemoji

解决方案

CSS Fonts Module Level 4只要提议生效，这应该通过 CSS 变得微不足道。请参阅第 9.3 节选择文本呈现样式：https: //drafts.c​​sswg.org/css-fonts-4/#font-variant-emoji-prop 的 font-variant-emoji 属性

同时，这里有一个解决方法，通过利用CSS 生成的内容不会在复制/粘贴操作中捕获这一事实来支持复制和粘贴。但是，这与文本输入等控件不兼容。

在 CSS 中：

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

和 HTML：

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

这正确地渲染了毕业帽，但奇怪的是不是恐龙。如果我将表情符号直接复制粘贴到源代码中，这对我不起作用；您需要明确指定代码点，不确定它是如何工作的。

在此处输入图像描述

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

LoremIpsum Lorem︎Ipsum

推荐阅读