如何防止Unicode字符从JavaScript渲染为HTML中的表情符号？

119

我从FileFormat.Info的search中找到特殊字符的Unicode 。

有些字符正在渲染为经典的黑白字形，例如⚠（警告符号\u26A0或⚠）。这些是更可取的，因为我可以将CSS样式（例如颜色）应用于它们。

其他人则将其渲染为较新的卡通表情符号，例如⌛（沙漏\u231B或⌛）。这些不是可取的，因为我无法完全设置它们的样式。

看来浏览器正在进行此更改，因为我能够在Mac Firefox上看到沙漏字形，而在Mac Chrome和Mac Safari上看不到。

有没有一种方法可以强制浏览器显示要显示的旧版本（平面单调）？

更新：看来（从下面的评论）有一个文本显示选择，FE0E，可用来执行文本VS-表情符号。选择器被连接为后缀，字符代码上没有空格，例如⌛︎HTML十六进制或\u231B\uFE0EJS。但是，并非所有浏览器（例如Chrome和Edge）都认可它。

— 躁狂症
source

您在CSS规则中设置了字体系列？

— G-Cyrillus 2015年

2

不一致的Unicode表情符号字形/符号的

— 一二三2015年

1

@janaspage ︎和\uFE0E是正确的（2和8），并且在Safari（8和9）中可以正常工作，但是就像答案所说的那样：浏览器支持参差不齐，Chrome（46）完全损坏。

— 一二三2015年

2

根本没有控制表情符号渲染的标准方法。

— nwellnhof，2015年

1

您所要做的就是强制使用一种字体，该字体包含此字符的字形，并且其字形看起来符合您想要的方式（无颜色，无形状或任何您喜欢的形状）。

— ShreevatsaR '17

133

附加Unicode变体选择符，以强制输入文本VS15 ︎。
这将迫使先前的字符呈现为文本，而不是表情符号。

<p>🔒&#xFE0E;</p>

结果：🔒︎

了解更多信息：Unicode符号为文本或表情符号

— 黄
source

1

这非常有帮助，这就是为什么我前几天投票了。我想知道如何将表情符号和这个不可见的角色粘贴到我正在编写的Facebook广告中？PS这也很有趣：apple.stackexchange.com/a/240450/53510

— Ryan

3

我只是意识到，这种︎技巧对某些字体不起作用。我很难找到可以合理预期在所有计算机（Windows，iOS，Mac，Android等）上安装的字体。

— 瑞安

12

对于可能甚至出现在输入字段中的符号，这种解决方案实际上是不可接受的。我在逻辑中使用符号this遇到麻烦，而且我一生无法理解为什么有人认为这应该是表情符号！

— frabjous

2

下一页对于在表情符号后立即复制和粘贴该特殊字符很有用，以使其显得平坦而不是风格化。例如，你可能会看到💬︎而不是💬和🌟︎代替🌟和⌛︎代替⌛和🔒︎代替🔒（根据您的设备）unicode-symbol.com/u/FE0E.html

— 莱恩

15

在我的示例中，这将作为表情符号渲染为mac 10.11.6上的chrome 71。

— lahwran

13

我曾在一个Unicode字符content的span::before，和我有font-family在中span设置为“的Segoe UI符号”。但是Chrome使用“ Segoe UI Emoji”作为字体来渲染它。

但是，当我为而不是仅将明确设置font-family为“ Segoe UI Symbol”时，它就起作用了。span::beforespan

— 格利亚
source

这应该是正确的答案，尤其是因为大多数主流浏览器都不赞成使用旧的不可见字符方法。

— Sarah C. Corriher

2

对于防止CSS显示iOS表情符号font-family: monospace的纯CSS解决方案，您可以使用默认的字形文本变体，而不是表情符号变体。

— 康巴克利
source

1

Android字体并不像您预期的那样丰富。字体文件没有这些奇异的字形，而Android可以破解一些没有字形的字符。它们被替换为图标。

因此，解决方案是将网站与网络字体（woff）集成在一起。例如，使用FontForge创建新的字体文件，然后从免费的衬线TTF中选择所需的字形。每个字形需要1k。生成woff文件。

准备简单的CSS以导入自定义字体系列。

style.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">
            😭 ☠ &#x2660; a  g
        </td>       
      </tr>
    </table>
  </body>
</html>

— 丹妮尔·S·雅伊茨科夫（Daneel S.Yaitskov）
source

1

如果您最关心的是强制单色显示，以便表情符号不会在文本中突出太多，则可能需要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的regex引擎对令牌进行标记化，然后emoji对数据库进行打包，但是Rust是一个很好的语言示例通过像这样的板条箱可以快速，轻松地迭代字素簇unicode-segmentation。

— 索科洛
source

0

桌面版本为75的Google Chrome浏览器似乎消除了它基于加载页面时遇到的第一个Unicode转义来呈现Unicode字符的方法。例如，当解析为页面源中的第一个HTML Unicode转义，并且没有等效的表情符号时，＆＃9207; 似乎向Chrome澄清了该页面包含的转义符不能呈现为表情符号。

— 克莱·艾伦
source

0

扩展索科洛的答案，使用滤镜很不错，至少可以使轮廓可见，而不是使用简单的字体，但是当您要使用特定颜色时，将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滤镜。

— IllidanS4希望莫妮卡回来
source

-2

我不知道一种关闭表情符号类型渲染的方法。通常我会使用图标字体，例如awesome或glyphicons 字体（Bootstrap 3随附）。

使用这些字符而不是Unicode字符的好处是

您可以从许多不同的样式中进行选择，以使其适合您的网站设计；
它们在浏览器之间是一致的（如果您曾经尝试使用unicode星形字符，则会发现IE与其他浏览器的区别是不同的）；
而且，它们完全可样式化，就像您要使用的Unicode字符一样。

唯一的缺点是浏览器在查看您的页面时下载还有另外一件事。

— 达维·麦卡平
source

-2

对我来说，在OSX上，解决方案是将font-family设置为 EmojiSymbols

— 内森
source

-3

上述解决方案均不适用于“ Google Chrome表情符号”扩展程序。

因此，作为一种变通办法，我制作了Unicode字符“带检查框的投票箱”（U + 2611）的屏幕截图，并将其添加为php的图像：

 $ballotBoxWithCheck='<img src="pics/U2611.png" style="height:11px;margin-bottom:-1px">'; # &#9745; or /U2611

请参阅：https：//spacetrace.org/man_card.php？tec_id = 21＆techname = multi-emp-vessel

— rubo77
source

几乎可以肯定，使用文本工具（选择了具有适当许可证的字体）将其粘贴到Inkscape中，然后运行自动跟踪，这样您可以从中获得可以缩放至所需大小的SVG。（为使其尽可能小，请将SVG缩小器与一些手动编辑配对以减少自动跟踪有误的路径中的节点数量。）

— ssokolow