我正在从FileFormat.Info's search 中找到特殊字符的 Unicode 。
一些字符被渲染为经典的黑白字形，例如 ⚠（警告标志，\u26A0或⚠）。这些是可取的，因为我可以对它们应用 CSS 样式（例如颜色）。
其他人则呈现为较新的卡通表情符号，例如 ⌛（沙漏\u231B或⌛）。这些不是可取的，因为我无法完全设置它们的样式。
浏览器似乎正在进行此更改，因为我可以在 Mac Firefox 上看到沙漏字形，而 Mac Chrome 和 Mac Safari 都看不到。
有没有办法强制浏览器显示旧的（平面单调）版本来显示？
更新：看来（从下面的评论）有一个文本显示选择，FE0E，可用来执行文本VS-表情符号。选择器作为没有空格的后缀连接到字符的代码上，例如⌛︎对于 HTML 十六进制或\u231B\uFE0E对于 JS。然而，并非所有浏览器（例如 Chrome 和 Edge）都支持它。
追加Unicode的变化选择字符迫使文本，VS15， ︎。
这会强制将前一个字符呈现为文本而不是表情符号。
<p>🔒︎</p>
结果：🔒︎
了解更多信息：Unicode 符号作为文本或表情符号
我曾在一个Unicode字符content的span::before，和我有font-family在中span设置为“的Segoe UI符号”。但是 Chrome 使用“Segoe UI Emoji”作为呈现它的字体。
但是，当我设置font-family为“的Segoe UI符号”明确的span::before，而不是只为span，那么它的工作。
对于阻止 iOS 显示表情符号font-family: monospace的纯CSS 解决方案，您可以使用默认为字形的文本变体而不是表情符号变体。
如果您主要关心的是强制单色显示以便表情符号不会从文本中脱颖而出，那么 CSS 过滤器，无论是单独使用还是与 Unicode 变体选择器结合使用，都可能是您想要的。
p.gscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
a {
color: #999;
-webkit-filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
filter: grayscale(100%) sepia(100%) saturate(400%) hue-rotate(170deg);
}<p class="gscale">You've now got emoji display on 🔒lockdown🔒.</p>
<p>External Link: <a href="https://knowyourmeme.com/memes/party-hard">celebrate 🎉</a></p>与变体选择器不同，表情符号的呈现方式无关紧要，因为 CSS 过滤器适用于所有内容。（我使用它们对已修改为指向 Wayback Machine 的超链接上的 PNG 格式“链接类型”图标进行灰度处理。）
请注意警告。您不能在子元素中覆盖父元素的过滤器，因此该技术不能用于对段落进行灰度化，然后对其中的链接重新着色。😢
...不过，它对于您要使整个内容成为超链接或禁止其中包含丰富标记的情况很有用。（例如标题和描述）
但是，除非真正应用 CSS，否则这将不起作用，所以我将提供第二个选项，它在<title>元素中比 Unicode 变体选择器更可靠（我正在 GitHub 上查看。我不喜欢我的浏览器标签）：
如果您将用户提供的字符串放入<title>元素中，请过滤掉表情符号以及任何粗体/斜体/下划线/等。标记。（是的，对于那些错过它的人，标准确实要求<title>除了＆符号转义之外的内容是纯文本，并且我测试的浏览器将所有标签解释为文字文本。）
我能想到的两种方法是：
emoji是数据库的包，但 Rust 是一种很好的语言示例通过像unicode-segmentation.)这样的箱子可以快速轻松地迭代字形集群。其他解决方案都不适合我，但我最终找到了一些由css-tricks提供的东西。在我的用例中，我在每个 Markdown 标题的末尾添加了一个链接符号，用于直接链接到文章中的部分，但表情符号看起来有点分散注意力。下面的代码让我可以让表情符号看起来像一个普通的符号，然后当鼠标悬停在上面时切换回看起来像一个表情符号，这对我的用例来说是完美的。如果您只是想让图标看起来更像一个符号，只需将 text-shadow 十六进制颜色更改为 #000，如第二个示例所示。
.direct-link {
color: transparent;
text-shadow: 0 0 #dbe2ec;
}
.direct-link:hover {
color: inherit;
}<h3>Blog Subheading<a href='#' class="direct-link">🔗</a></h3> .direct-link {
color: transparent;
text-shadow: 0 0 #000;
} <h3>Blog Subheading<a href='#' class="direct-link">🔗</a></h3>