如何防止Unicode字符在JavaScript中从HTML呈现为表情符号？
105 html javascript css unicode emoji
我正在从FileFormat.Info的搜索中找到特殊字符的Unicode .
某些字符呈现为经典的黑白字形,例如⚠(警告标志\u26A0或⚠).这些是首选,因为我可以将CSS样式(如颜色)应用于它们.
其他人正在渲染为更新的卡通表情符号,例如hour(沙漏,\u231B或⌛).这些不是优选的,因为我不能完全定型它们.
看来浏览器正在进行此更改,因为我能够在Mac Firefox上看到沙漏字形,而不是Mac Chrome或Mac Safari.
有没有办法强制浏览器显示旧的(单调单调)版本？
更新:看来(从下面的评论)有一个文本显示选择,FE0E,可用来执行文本VS-表情符号.选择器作为后缀连接到字符的代码上,没有空格,例如⌛︎HTML十六进制或\u231B\uFE0EJS.但是,它并没有被所有浏览器(例如Chrome和Edge)所尊重.
小智 120
附加用于强制文本的Unicode变体选择器字符VS15 , ︎.
这会强制将前一个字符呈现为文本而不是表情符号.
<p>︎</p>
结果:︎
了解更多信息:Unicode符号作为文本或表情符号
- 对于甚至可能出现在输入字段中的符号,此解决方案实际上是不可接受的 我在逻辑中使用的符号having遇到了这个问题,我无法理解为什么有人认为这应该是一个表情符号! (11认同)
- 在我的示例中，这将作为表情符号渲染为mac 10.11.6上的chrome 71。 (9认同)
- 我刚刚意识到这个'︎`技巧对某些字体不起作用.我很难找到一种可以合理地预期安装在所有机器上的字体(Windows,iOS,Mac,Android等). (3认同)
- 以下页面有助于在表情符号后立即复制和粘贴该特殊字符，使其看起来平坦而不是风格化。例如，您可能会看到 ︎ 代替和 ︎ 代替 ⌛︎ 代替 ⌛ 和 ︎ 代替（取决于您的设备） http://www.unicode-symbol.com/u/FE0E.html (2认同)
小智 10
我有一个像span::before内容这样的Unicode字符.Chrome使用"Segoe UI Emoji"作为渲染它的字体.即使我将字体系列设置为"Segoe UI Symbol",它也无效.
但是,当我明确地将font-family设置为"Segoe UI Symbol"时span::before,而不仅仅是for span,那么它就可以了.
对于阻止 iOS 显示表情符号font-family: monospace的纯CSS 解决方案，您可以使用默认为字形的文本变体而不是表情符号变体。
- 对我来说，它是这个和 /sf/answers/2691667751/ 的组合，适用于 Chrome 85 (3认同)
如果您主要关心的是强制单色显示以便表情符号不会从文本中脱颖而出，那么 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>除了＆符号转义之外的内容是纯文本，并且我测试的浏览器将其中的所有标签解释为文字文本。）
我能想到的两种方法是：
- 直接使用手动维护的正则表达式，该正则表达式匹配最新版本的 Unicode 放置其表情符号及其修饰符的块。
- 遍历字素簇并丢弃任何包含已识别表情符号代码点的内容。（字形集群是一个基本字形加上构成可见字符的所有变音符号和其他修饰符。我链接到的示例使用 Python 的正则表达式引擎进行标记，然后
emoji是数据库的包，但 Rust 是一种语言的好示例通过像unicode-segmentation.)
dav*_*ine -2
我不知道如何关闭表情符号类型渲染。通常我使用图标字体，例如font Awesome或glyphicons（Bootstrap 3 附带）。
与 unicode 字符相比，使用这些字符的好处是
- 您可以从多种不同的样式中进行选择，使其适合您网站的设计；
- 它们在浏览器中是一致的（如果您曾经尝试过使用 unicode 星号字符，您会发现它在 IE 中与其他浏览器中有所不同）；
- 而且，它们是完全可设置样式的，就像您尝试使用的 unicode 字符一样。
唯一的缺点是浏览器在查看您的页面时还要下载另一件事。