某些 Unicode 字符在某些浏览器中会自动转换为表情符号。我无法确切说明原因,但以下是我观察到的情况

这些文本 Unicode 字符(▶、↩ 和 ❤)在 Chrome 中显示为文本,而 iOS Safari 将它们转换为表情符号。请注意,当它们是文本时,我可以更改它们的 color
,但在它们转换为表情符号后,我无法更改。
上述字符也可能会在您的设备上转换为表情符号。在我的 WordPress 编辑器中,它们看起来像是文本。耸肩。
我之所以遇到这种情况,是因为我当时在帮助某人处理他们的网站,而他们不喜欢显示的“红色菱形”。在查看手机之前,我没有看到它们是红色的。
︎︎“文本呈现选择器”
有几个人告诉我,如果你使用这个(︎︎︎
)在字符之前,它会“请求将其呈现为文本”。这是该规范。但我无法让它工作。
更新!这不是在之前,而是应该在之后!因此,例如 ❤︎︎
。这对我来说确实在 iOS 上有效。 感谢 David.
这是我的测试
我在 iOS 上看到的内容

我在一些零散的帖子中读到,font-family: monospace
也会阻止表情符号转换,但这对我来说也不起作用(尽管我被告知它在 iPadOS 上有效)。
让它成为表情符号,但无论如何强制颜色。
如果你可以选中元素,即使字符变成了表情符号,你也可以强制它们显示为一种颜色。以下来自 Andrew Walpolea 的示例
Preethi Sam 在博客中提到,你也可以使用 text-shadow
来实现相同的效果
我的问题是,没有选择器可以使用!我遇到问题的菱形字符在数据库中数百个随机帖子中出现。
算了吧
我放弃了,通过 Better Search Replace 在整个数据库上执行了 MySQL 搜索/替换,以消除它们。

Matias Singers 在 “将 Unicode 符号呈现为文本或表情符号。” 中对此进行了更多介绍。
更正:变体选择器应该在要影响的内容之后。
在 iPadOS 上,
font-family: monospace
技巧有效。我在你的 codepen 中使用它时,确实看到了字符而不是表情符号。确保浏览器不会在你使用表情符号时咬你!
嗨,Chris,
字符顺序很重要!我敢打赌你没有尝试将适当的 Unicode 变体选择器放在表情符号字符的之后,而不是之前。
当变体序列格式正确时,这实际上会告诉浏览器根据使用哪个变体选择器来将字符呈现为表情符号或文本
变体选择器-16
$#xFE0F;
呈现为表情符号 ❤️变体选择器-15
$#xFE0E;
呈现为文本 ❤︎基本规则?在表情符号字符后紧跟变体选择器 - 不要在两个字符之间加空格(否则,表情符号将呈现为文本)。例如,Unicode ‘Heavy Black Heart’ 的变体序列应该是
❤️
,它告诉浏览器将其呈现为表情符号。这里我使用了 HTML 实体,但前提应该是可与其他 Unicode 格式互换。另外,它使用
content: "\2764\fe0f";
语法与 CSS 伪元素配合使用效果一样好!据我所知,这是在所有平台上强制正确呈现最可靠的方法。也许你可以更新你的pen,显示正确的用法,以及没有变体选择器的示例。这可能有助于其他人查看他们的浏览器是否受到 - 我们称之为表情符号呈现错误 - 的影响。
就这样。欢呼。
在 Chrome 89(Windows)上,所有这些字符都对我显示为表情符号。Android 上也是如此。Android 上的 Firefox 执行了正确的操作。我没有桌面版的 Firefox 来测试。
@shiv - 如果你在你的‘表情符号’字符后面紧跟着(FE0F)变体选择器,例如
❤
和️
,那么是的,它将显示为表情符号。使用(FE0E)代替,像这样❤
后面跟着︎
,它应该显示为文本。如果使用 HTML 实体(就像我一样),不要忘记;
分号(我省略了它们,因为它们会影响评论标记)。这些确实按描述工作(我刚刚在 Chromium、Firefox、Microsoft Edge、Opera 和 Vivaldi 的当前 Windows 版本上进行了双重检查,不过 Chromium 和 Firefox 通常就足够了)。
我使用的示例字符是‘Heavy Black Heart’(2764),无论其呈现为表情符号还是文本,它看起来仍然像一个心。使用(2764)的唯一区别是,作为表情符号,它是红色的,带有黑色边框 ❤️,而作为文本,它只是普通的 ❤︎。
此链接指向一个包含许多 表情符号变体序列 示例的 PDF 文档。它有点过时了,但用 Google 搜索一下很可能会找到更最新的内容。
作为补充 - 可能有时你会想在标记中直接使用 FE0F/FE0E,而不是使用 HTML 实体。
我在 U+FE0F 和 U+FE0E 上找到了一个方便的复制粘贴方法,这是对原本不方便的‘alt+数字键盘’方法(Windows)的不错替代方案。当然,应该在标记中正确声明 utf-8,以及一个合适的文档类型和一个支持 Unicode 的 字体。
请记住,这些变体选择器是不可打印的,或不可见的字符(无论你想称它们为什么),因此你不仅不会看到它们,而且粘贴时它们甚至可能不占用字符空间。为了避免潜在的 墨菲定律 效应,我建议无论如何使用 HTML 实体(为了安全起见)。