首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用CSS将表情符号的呈现方式更改为类似纯文本的方式?

使用CSS将表情符号的呈现方式更改为类似纯文本的方式?
EN

Stack Overflow用户
提问于 2020-10-02 13:15:42
回答 1查看 322关注 0票数 0

如果我在这里输入像??这样的表情符号,你可能会看到彩色的精灵。

如果您将其复制并粘贴到Windows Notepad / Notepad++中,您将看到如下所示的内容。

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

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

此处的非接受响应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年以来一直没有进展&我不知道其他地方是否继续取得进展。

EN

回答 1

Stack Overflow用户

发布于 2020-10-02 14:27:25

每当提议的CSS Fonts Module Level 4生效时,这应该通过CSS变得微不足道。请参见第9.3节选择文本呈现样式:https://drafts.csswg.org/css-fonts-4/#font-variant-emoji-prop的字体变体表情符号属性

同时,这里有一个解决方法,它通过利用CSS generated content is not captured in copy/paste operations的事实来支持复制和粘贴。不过,这与文本输入之类的控件不兼容。

在CSS中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.emoji::after {
   display: inline;
   content: '\FE0E';
}

和HTML:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Lorem<span class="emoji">&#x1F393;</span>Ipsum
Lorem<span class="emoji">&#x1F995;</span>Ipsum

这正确地渲染了毕业帽,但奇怪的是不是恐龙。如果我直接将emoji复制粘贴到源代码中,这对我不起作用;您需要显式指定代码点,不确定它是如何工作的。

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Lorem?Ipsum Lorem?︎Ipsum
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/64172221

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文