如何防止 Unicode 字符在 JavaScript 中呈现为 HTML 中的表情符号？
我正在从 FileFormat.Info's search 中找到特殊字符的 Unicode。
一些字符呈现为经典的黑白字形，例如⚠（警告标志，\u26A0 或 ⚠）。这些更可取，因为我可以将 CSS 样式（例如颜色）应用于它们。
https://i.stack.imgur.com/mRrUw.png
其他人则呈现为较新的卡通表情符号，例如⌛（沙漏，\u231B 或 ⌛）。这些不是可取的，因为我无法完全设置它们的样式。
https://i.stack.imgur.com/niqCz.png
看来浏览器正在做出这种改变，因为我能够在 Mac Firefox 上看到沙漏字形，而不是 Mac Chrome 或 Mac Safari。
有没有办法强制浏览器显示较旧的（平面单调）版本来显示？
更新：似乎（根据下面的评论）有一个 text presentation selector、FE0E 可用于强制执行 text-vs-emoji。选择器作为不带空格的后缀连接到字符代码上，例如用于 HTML 十六进制的 ⌛︎ 或用于 JS 的 \u231B\uFE0E。但是，并非所有浏览器都支持它（例如 Chrome 和 Edge）。
︎ 和 \uFE0E 是正确的（2 和 8）并且在 Safari（8 和 9）中工作正常，但就像答案所说：浏览器支持参差不齐，Chrome（46）完全坏了。
附加 Unicode variation selector 字符以强制文本，VS15，︎。
这会强制将前一个字符呈现为文本而不是表情符号。
<p>🔒︎</p>
结果：🔒︎
了解详情：Unicode symbol as text or emoji
我在 span::before 的 content 中有一个 Unicode 字符，并且我将 span 的 font-family 设置为“Segoe UI Symbol”。但是 Chrome 使用“Segoe UI Emoji”作为字体来渲染它。
但是，当我将 font-family 设置为 span::before 的“Segoe UI 符号”显式时，而不仅仅是 span，它就起作用了。
对于阻止 iOS 显示表情符号的纯 CSS 解决方案，您可以使用 font-family: monospace，它默认为字形的文本变体而不是表情符号变体：
普通字符：↩
等宽字符：↩
如果您主要关心的是强制单色显示以使表情符号不会从文本中脱颖而出，那么 CSS 过滤器（单独或与 Unicode 变体选择器结合使用）可能是您想要的。
p.gscale { -webkit-filter: 灰度（100%）；过滤器：灰度（100%）； } a { 颜色：#999; -webkit-filter：灰度（100%）棕褐色（100%）饱和（400%）色调旋转（170度）；滤镜：灰度（100％）棕褐色（100％）饱和（400％）色调旋转（170度）； }
你现在已经在 🔒lockdown🔒 上显示了表情符号。
外部链接：庆祝🎉
与变体选择器不同，表情符号的呈现方式无关紧要，因为 CSS 过滤器适用于所有内容。 （我使用它们对已修改为指向 Wayback Machine 的超链接上的 PNG 格式的“链接类型”图标进行灰度化。）
请注意警告。您不能在子元素中覆盖父元素的过滤器，因此该技术不能用于对段落进行灰度化，然后重新着色其中的链接。 😢
...不过，它对于您将整个事物设为超链接或不允许其中包含丰富标记的情况很有用。 （例如标题和描述）
但是，除非实际应用了 CSS，否则这将不起作用，因此我将提供第二个选项，它在 <title> 元素中比 Unicode 变体选择器更可靠（我在看你的 GitHub。我不喜欢假我的浏览器标签中的图标）：
如果您将用户提供的字符串放入 <title> 元素中，请过滤掉表情符号以及任何粗体/斜体/下划线/等。标记。 （是的，对于那些错过它的人，该标准确实要求 <title> 的内容是纯文本，除了 & 符转义和我测试的浏览器将所有标签解释为文字文本。）
我能想到的两种方法是：
直接使用手动维护的正则表达式，它与最新版本的 Unicode 放置其表情符号及其修饰符的块相匹配。遍历字素簇并丢弃任何包含已识别的表情符号代码点的内容。 （字素簇是一个基本字形加上构成可见字符的所有变音符号和其他修饰符。我链接到的示例使用 Python 的正则表达式引擎进行标记，然后使用数据库的表情符号包，但 Rust 是一个很好的例子通过像 unicode-segmentation 这样的 crate 可以快速轻松地迭代字素簇的语言。）
其他解决方案都不适合我，但我最终找到了 css-tricks 提供的东西。在我的用例中，我在每个 Markdown 标题的末尾添加了一个链接符号，用于直接链接到文章中的部分，但表情符号看起来有点分散注意力。下面的代码让我可以让表情符号看起来像一个普通的符号，然后在悬停在上面时切换回看起来像一个表情符号，这非常适合我的用例。如果您只是想让图标看起来更像一个符号，只需将 text-shadow 十六进制颜色更改为 #000，如第二个示例所示。
.direct-link { 颜色：透明；文本阴影：0 0 #dbe2ec; } .direct-link:hover { 颜色：继承； }
博客副标题🔗
.direct-link { 颜色：透明；文字阴影：0 0 #000; }
博客副标题🔗
Android 字体并不像你想象的那样丰富。字体文件没有这些奇异的字形，Android 对没有字形的少数字符进行了破解。它们被图标替换。
所以解决方案是将网站与网络字体（woff）集成。例如，使用 FontForge 创建新字体文件并从免费衬线 TTF 中选择所需的字形。每个字形需要 1k。生成 woff 文件。
准备简单的 CSS 以导入自定义字体系列。
样式.css：
@font-face {
font-family: 'Exotic Icons';
src: url('exotic-icons.woff') format('woff');
}
.exotic-symbol-font {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Exotic Icons';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
index.html 文件：
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></head>
<title>Test custom glyphs</title>
</head>
<body>
<table>
<tr>
<td class="exotic-symbol-font">
😭 ☠ ♠ a g
</td>
</tr>
</table>
</body>
</html>
Google Chrome 桌面版 75 似乎根据加载页面时遇到的第一个 Unicode 转义来消除其呈现 Unicode 字符的方法。例如，当被解析为页面源中的第一个 HTML Unicode 转义，并且没有等效的表情符号时，⏷似乎向 Chrome 澄清该页面包含不被呈现为表情符号的转义。
在 ssokolow's answer 的基础上扩展，使用过滤器很好，至少可以使轮廓可见，而不是使用简单的字体，但是当您想要使用特定颜色时，将 RGB 颜色转换为一系列 CSS 过滤器非常困难。
一个更好的（虽然很冗长）选项是使用 <feColorMatrix> SVG 过滤器。结合灰度过滤器和数据 URI 方案，您可以通过 RGB 和内联 CSS 来表示颜色：
.violet {
color: white;
filter: grayscale(100%) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'><filter id='f'><feColorMatrix type='matrix' values='0.78 0 0 0 0 0 0.082 0 0 0 0 0 0.522 0 0 0 0 0 1 0'/></filter></svg>#f");
}
不幸的是，您不能使用数据（取自属性或变量）对 URL 进行插值，但至少您不必根据 RGB 计算 CSS 过滤器。
如果其他答案都不适合您，则您的字体堆栈中可能有一种或多种这些字体（就像我们的情况一样）：
Segoe UI 表情符号
苹果色表情符号
这些包含在许多常用字体堆栈中，如果我没记错的话，比如 Github 字体堆栈。
我的问题的具体版本
我的网站在 CSS 伪元素（::after 和 ::before）中使用 ◀︎（黑色右指向三角形）和类似字符来指示列表中的当前项目。
在我的测试中，我总是使用 the triangle character and the variation selector 15 together。首先，我同时使用了来自 Google Fonts 的 webfont 和 安装在设备上的字体，它们都应该包含这些字符的字形，但出于某种原因，这个假设一定是错的。我还在 Google Fonts 上尝试了不同的子集，但无济于事：我的两台带有 Google Chrome 和 Samsung Internet (Chromium) 的 android 设备总是呈现表情符号而不是文本字形。
我的解决方案
我的解决方案是下载 Gnu Free Font 的最新 WOFF（我知道其中包含这些字符的字形），将其包含在我的项目中，并使用 @font-face 定义它：
@font-face {
font-family: "Free Sans";
src: url("/site/static/fonts/FreeFont/FreeSans.woff") format("woff");
}
然后，为我的伪元素设置样式：
span.current::after {
font-family: "Free Sans", $universal-font-family ! important;
}
讨论
我还不确定仅对这几个字符使用 786K 额外字体对性能的影响。如果这成为问题，则应该可以使用仅包含这些字符的精简自定义字体。
我不知道关闭表情符号类型渲染的方法。通常我使用图标字体，例如 font awesome 或 glyphicons（Bootstrap 3 附带）。
使用这些而不是 unicode 字符的好处是
您可以从许多不同的样式中进行选择，使其适合您的网站设计；它们在浏览器中是一致的（如果你曾经尝试过使用 unicode 星号，你会发现它在 IE 和其他浏览器中是不同的）；此外，它们是完全可样式化的，就像您尝试使用的 unicode 字符一样。
唯一的缺点是浏览器在查看您的页面时要下载另一件事。
对于我在 OSX 上的解决方案是将 font-family 设置为 EmojiSymbols
上述解决方案均不适用于“谷歌 Chrome 表情符号”扩展程序。
因此，作为一种解决方法，我制作了 Unicode 字符 'BALLOT BOX WITH CHECK' (U+2611) 的屏幕截图，并使用 php 将其添加为图像：
$ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # ☑ or /U2611
https://i.stack.imgur.com/PBFg2.png
请参阅：https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
关注公众号
不定期副业成功案例分享
︎技巧不适用于某些字体。我很难找到一种我可以合理期望安装在所有机器（Windows、iOS、Mac、Android 等）上的字体。