如何防止Unicode字符在JavaScript中从HTML呈现为表情符号？

时间：2015-10-02 20:37:18

标签： javascript html css unicode emoji

我正在为FileFormat.Info's search中的特殊字符找到Unicode。

某些字符呈现为经典的黑白字形，例如⚠（警告标志，\u26A0或⚠）。这些是首选，因为我可以将CSS样式（如颜色）应用于它们。

image of warning glyph

其他人正在渲染为更新的卡通表情符号，例如⌛（沙漏，\u231B或⌛）。这些不是优选的，因为我不能完全定型它们。

image of hourglass emoji

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

有没有办法强制浏览器显示要显示的较旧（平单调）版本？

更新：似乎（来自下面的评论）有text presentation selector，FE0E可用于强制执行text-vs-emoji。选择器作为后缀连接到字符的代码上，没有空格，例如HTML {16}的⌛︎或JS的\u231B\uFE0E。但是，并不是所有浏览器都支持（例如Chrome和Edge）。

12 个答案:

答案 0 :(得分：102)

附加Unicode variation selector字符以强制文字，VS15，︎。
这会强制将前一个字符呈现为文本而不是表情符号。 

<p>&#xFE0E;</p>

结果：︎

了解详情：Unicode symbol as text or emoji

答案 1 :(得分：8)

我有span::before内容这样的Unicode字符。 Chrome使用了＆＃34; Segoe UI Emoji＆＃34;作为渲染它的字体。即使我将字体系列设置为＆＃34; Segoe UI Symbol＆＃34;，它也无法正常工作。

但是，当我将font-family设置为＆＃34; Segoe UI Symbol＆＃34;明确地针对span::before，而不是仅针对span，然后才有效。

答案 2 :(得分：3)

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

答案 3 :(得分：1)

Android字体并不像您期望的那样丰富。 字体文件没有这些奇特的字形，Android有一个没有字形的少数字符的黑客。它们被替换为图标。

因此解决方案是将网站与网络字体（woff）集成。 使用FontForge创建新的字体文件，并从免费的serif 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>

答案 4 :(得分：0)

对于我在OSX上的解决方案是将font-family设置为Private Sub btnInsert_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnInsert.Click Dim myList As ListViewItem Dim JmlList As Integer Dim i As Integer JmlList = lst_detail.Items.Count - 1 i = 0 myList = lst_detail.Items.Add(str(lst_detail.Items.Count + 1)) // error at this myList.SubItems.Add(txtKodeObat.Text.Trim) myList.SubItems.Add(txtNamaObat.Text.Trim) myList.SubItems.Add(txtHarga.Text.Trim) myList.SubItems.Add(txtQty.Text.Trim) myList.SubItems.Add(txtJumlah.Text.Trim) Dim subtotal As Double = 0 JmlList = lst_detail.Items.Count - 1 For i = 0 To JmlList subtotal = subtotal + Val(lst_detail.Items(i).SubItems(5).Text) Next txtSubTotal.Text = Format(subtotal, "##########") txtPPn.Text = Format(subtotal * 0.1, "##########") txtTotal.Text = Val(txtSubTotal.Text) + Val(txtPPn.Text) txtKodeObat.Text = "" txtNamaObat.Text = "" txtHarga.Text = "0" txtQty.Text = "" txtJumlah.Text = "0" txtKodeObat.Focus() End Sub

答案 5 :(得分：0)

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

所以我制作了Unicode字符'BALLOT BOX WITH CHECK'（U + 2611）的屏幕截图，并将其添加为带有php的图像：

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

enter image description here

请参阅：https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

答案 6 :(得分：0)

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

答案 7 :(得分：0)

如果您最关心的是强制单色显示，以免表情符号在文本中显得过分突出，则可能需要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>的内容是“＆”转义符之外的纯文本，并且我测试过的浏览器将所有解释标记都视为纯文本。）

我能想到的两种方法是：

  1. 直接使用手动维护的regex，它与最新版本的Unicode放置表情符号及其修饰符的块匹配。
  2. 遍历字素簇和discard中包含识别的表情符号代码点的任何簇。 （一个字素簇是一个基本字形，加上所有组成音符的变音符号和其他修饰符。我链接的示例使用Python的regex引擎对令牌进行标记，然后对数据库进行emoji封装，但Rust是一个通过unicode-segmentation之类的板条箱可以方便快捷地迭代字素簇的语言的一个很好的例子。）

答案 8 :(得分：0)

在ssokolow's answer上进行扩展，使用滤镜非常好，至少可以使轮廓可见，而不是使用简单的字体，但是当您想使用RGB时，将RGB颜色转换为CSS滤镜序列非常困难。特定颜色。

一个更好的（虽然很冗长）选项是使用<feColorMatrix> SVG过滤器。结合使用灰度滤镜和数据URI方案，您可以通过RGB和嵌入式CSS来表示颜色：

<allow users="?" />

不幸的是，您不能用数据（从属性或变量中获取）插入URL，但至少不必从RGB计算CSS滤镜。

答案 9 :(得分：0)

没有其他解决方案对我有用，但最终我发现了一些受css-tricks欢迎的东西。在我的用例中，我在每个markdown标头的末尾添加了一个链接符号，用于直接链接到文章中的各个部分，但emoji表情符号看起来有点分散注意力。以下代码使我可以使表情符号看起来像一个普通的符号，然后将鼠标悬停在上面时又切换回表情符号，这对我的用例来说是完美的。如果只想使图标看起来更像符号，只需将文本阴影的十六进制颜色更改为＃000，如第二个示例所示。 

<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>
Resolving project references ...
Importing web service metadata ...
Number of service endpoints found: 2
Scaffolding service reference code ...
Warning:Warning: Cannot import wsdl:portType
Detail: An exception was thrown while running a WSDL import extension: System.ServiceModel.Description.DataContractSerializerMessageContractImporter
Error: Could not load file or assembly 'Java.Interop, Version=0.1.0.0, Culture=neutral, PublicKeyToken=84e04ff9cfb79065'. The system cannot find the file specified.
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:portType[@name='IDeliveryService']
Warning:Warning: Cannot import wsdl:port
Detail: 
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:service[@name='DeliveryService']/wsdl:port[@name='BasicHttpBinding_IDeliveryService']
Warning:Warning: Cannot import wsdl:binding
Detail: There was an error importing a wsdl:portType that the wsdl:binding is dependent on.
XPath to wsdl:portType: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:portType[@name='IDeliveryService']
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:binding[@name='NetTcpBinding_IDeliveryService']
Warning:Warning: No endpoints compatible with .Net Core apps were found.
Warning:Warning: Cannot import wsdl:port
Detail: 
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:service[@name='DeliveryService']/wsdl:port[@name='NetTcpBinding_IDeliveryService']
Warning:Warning: Cannot import wsdl:binding
Detail: There was an error importing a wsdl:portType that the wsdl:binding is dependent on.
XPath to wsdl:portType: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:portType[@name='IDeliveryService']
XPath to Error Source: //wsdl:definitions[@targetNamespace='http://tempuri.org/']/wsdl:binding[@name='BasicHttpBinding_IDeliveryService']
Error:Error: No code was generated.
If you were trying to generate a client, this could be because the metadata documents did not contain any valid contracts or services, or because all contracts/services were discovered to exist in --reference assemblies. Verify that you passed all the metadata documents to the tool.
Done.

答案 10 :(得分：0)

我的具体版本问题

我的网站在 CSS 伪元素（::after 和 ::before）中使用 ◀︎（黑色右指三角形）和类似字符来指示当前项目一个列表。

在我的测试中，我总是使用 the triangle character and the variation selector 15 together。首先，我使用了来自 Google Fonts 的 webfont 和安装在设备上的字体，它们都应该包含这些字符的字形，但出于某种原因，这个假设一定是错误的。我还在 Google Fonts 上尝试了不同的子集，但无济于事：我的两台带有 Google Chrome 和三星互联网 (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 额外字体对性能的影响。如果这成为一个问题，应该可以使用仅包含这些字符的精简自定义字体。

答案 11 :(得分：-3)

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

使用这些优于unicode字符的好处是

  1. 您可以选择多种不同的款式，以符合您网站的设计;
  2. 它们在浏览器中是一致的（如果你曾经尝试过做一个unicode明星角色，你会注意到IE与其他浏览器不同）;
  3. 此外，它们完全可以设置样式，就像您尝试使用的unicode字符一样。

    4. 唯一的缺点是浏览器在查看您的页面时还有一件事需要下载。

相关问题
最新问题