blocks|key|2502032|text|追加强制文本、VS15、︎的Unicode+variation+selector字符。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2502033|这会强制将前一个字符呈现为文本，而不是Emoji符号。|2502034|<p>&#xFE0E;</p>|code-block|syntax|javascript|2502035|结果：︎|2502036|欲了解更多信息，请访问：Unicode+symbol+as+text+or+emoji|2502037|entityMap|0|LINK|mutability|MUTABLE|url|http://graphemica.com/%25EF%25B8%258E|1|https://en.wikipedia.org/wiki/Variant_form_(Unicode)#Variation_Selectors_block|2|http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/^0|C|1|C|1|0|E|Q|1|0|0|0|0|C|V|2|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@$9|15|A|16|1|17]|$9|18|A|19|1|1A]]|E|$]]|$1|F|3|G|5|6|7|1B|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1C|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1D|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|Q|3|-4|5|6|7|1I|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]|Y|$5|T|U|V|E|$W|Z]]|10|$5|T|U|V|E|$W|11]]]]

<p>Append the <a href="https://en.wikipedia.org/wiki/Variant_form_(Unicode)#Variation_Selectors_block" rel="noreferrer">Unicode variation selector</a> character for forcing text, VS15, <a href="http://graphemica.com/%EF%B8%8E" rel="noreferrer"><code>&amp;#xFE0E;</code></a>. <br>
This forces the previous character to be rendered as text rather than as an Emoji Symbol. </p>

<pre><code>&lt;p&gt;&amp;#xFE0E;&lt;/p&gt;
</code></pre>

<p>Result: &#xFE0E;</p>

<p>Learn more at: <a href="http://mts.io/2015/04/21/unicode-symbol-render-text-emoji/" rel="noreferrer">Unicode symbol as text or emoji</a></p>


blocks|key|34949|text|我在span::before的content中有一个Unicode字符，并且我将span的符号设置为"Segoe+UI+Symbol“。但是Chrome使用了"Segoe+UI+Emoji“作为字体来渲染它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|34950|但是，当我为span::before显式地将font-family设置为"Segoe+UI+Symbol“，而不仅仅是为span设置时，它就起作用了。|34951|entityMap^0|2|C|F|7|14|4|0|6|C|M|B|1O|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|I|$]]

<p>I had a Unicode character in the <code>content</code> of a <code>span::before</code>, and I had the <code>font-family</code> of the <code>span</code> set to "Segoe UI Symbol". But Chrome used "Segoe UI Emoji" as the font to render it.</p>

<p>However, when I set the <code>font-family</code> to "Segoe UI Symbol" <em>explicitly</em> for the <code>span::before</code>, rather than just for the <code>span</code>, then it worked.</p>


blocks|key|36590|text|为了防止iOS显示表情，您可以使用font-family:+monospace，它默认使用字形的文本变体，而不是表情变体。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|36591|entityMap^0|H|M|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>For a CSS-only solution to prevent iOS displaying emojis, you can use <code>font-family: monospace</code> which defaults to the text variant of the glyph rather than the emoji variant.</p>


blocks|key|34908|text|如果你主要关心的是强制单色显示，这样表情符号就不会从文本中突出太多，那么CSS过滤器，无论是单独的还是与Unicode变体选择器结合使用的，都可能是你想要的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|34909|​|34910|p.gscale+{+
++-webkit-filter:+grayscale(100%25);
++filter:+grayscale(100%25);
}
a+{
++color:+#999;
++-webkit-filter:+grayscale(100%25)+sepia(100%25)+saturate(400%25)+hue-rotate(170deg);
+++filter:+grayscale(100%25)+sepia(100%25)+saturate(400%25)+hue-rotate(170deg);
}|code-block|syntax|javascript|34911|<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>|34912|34913|与变体选择器不同，表情符号如何呈现并不重要，因为CSS过滤器适用于所有内容。(我使用它们对已修改为指向Wayback+Machine的超链接上的PNG格式的“链接类型”图标进行灰度处理。)|34914|只要注意的警告就行了。您不能在子元素中覆盖父元素的过滤器，因此该技术不能用于灰色化段落，然后重新着色其中的链接。|34915|...still，当你想要把整个东西变成一个超链接或者不允许在其中包含丰富的标记时，它很有用。(例如，标题和描述)|34916|但是，除非实际应用CSS，否则这不会起作用，所以我将给出第二个选项，它在<title>元素中比Unicode变体选择器更可靠(我正在研究GitHub。我不喜欢在我的浏览器选项卡中出现假图标)：|offset|length|style|CODE|34917|如果要将用户提供的字符串放入<title>元素中，请过滤掉表情符号和任何粗体/斜体/下划线/等标记。(是的，对于那些错过它的人，该标准确实要求<title>的内容为纯文本，除了&符号转义和我测试的所有浏览器都将其中的标记解释为文字文本。)|34918|我能想到的两种方法是：|34919|Unicode直接使用手动维护的regex，它匹配最新版本的Unicode通过字素集群放置其表情符号和它们的|34920|的块，并使用包含识别的表情符号代码点的discard+any。(字素簇是一个基本字形加上组成可见字符的所有变音符号和其他修饰符。我链接到的示例使用Python引擎进行标记化，然后使用数据库的Rust包进行标记化，但是emoji是一个很好的示例语言，在这种语言中，通过像Rust这样的crate可以快速轻松地迭代字素集群|unordered-list-item|34921|34922|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/43242440/javascript-unicode-emoji-regular-expressions|1|https://stackoverflow.com/a/49242754/435253^0|0|0|0|0|0|0|0|0|10|7|0|E|7|1Z|7|0|0|G|5|0|0|30|5|J|7|1|0|0^^$0|@$1|2|3|4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1I|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|1J|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|1K|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|1L|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1M|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1N|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1O|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1P|8|@$T|1Q|U|1R|V|W]]|9|@]|A|$]]|$1|X|3|Y|5|6|7|1S|8|@$T|1T|U|1U|V|W]|$T|1V|U|1W|V|W]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|1X|8|@]|9|@]|A|$]]|$1|11|3|12|5|6|7|1Y|8|@]|9|@$T|1Z|U|20|1|21]]|A|$]]|$1|13|3|14|5|15|7|22|8|@$T|23|U|24|V|W]]|9|@$T|25|U|26|1|27]]|A|$]]|$1|16|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|17|3|-4|5|6|7|29|8|@]|9|@]|A|$]]]|18|$19|$5|1A|1B|1C|A|$1D|1E]]|1F|$5|1A|1B|1C|A|$1D|1G]]]]

<p>If your primary concern is forcing monochromatic display so the emoji don't stand out from the text too much, CSS filters, either alone or in combination with the Unicode variation selector, may be something you want.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p class="gscale"&gt;You've now got emoji display on lockdown.&lt;/p&gt;

&lt;p&gt;External Link: &lt;a href="https://knowyourmeme.com/memes/party-hard"&gt;celebrate &lt;/a&gt;&lt;/p&gt;</code></pre>
</div>
</div>
</p>

<p>Unlike the variation selector, it shouldn't matter how the emoji are rendered, because CSS filters apply to everything. (I use them to grayscale PNG-format "link type" icons on hyperlinks that have been modified to point to the Wayback Machine.)</p>

<p>Just <strong>mind the caveat</strong>. You can't override a parent element's filter in a child, so this technique can't be used to grayscale a paragraph, then re-colorize the links within it. </p>

<p>...still, it's useful for situations where you're either going to be making the whole thing a hyperlink or disallowing rich markup within it. (eg. titles and descriptions)</p>

<p>However, this won't work unless CSS actually gets applied, so I'll give a second option which is more reliable in <code>&lt;title&gt;</code> elements than the Unicode variation selector (I'm looking at you GitHub. I don't like fake icons in my browser tabs):</p>

<p>If you're putting a user-provided string into a <code>&lt;title&gt;</code> element, filter out the emoji along with any bold/italic/underline/etc. markup. (Yes, for those who missed it, the standard does call for the contents of <code>&lt;title&gt;</code> to be plain text aside from the ampersand escapes and the browsers I tested all interpret tags within as literal text.)</p>

<p>The two ways I can think of are:</p>

<ol>
<li>Directly use a manually-maintained <a href="https://stackoverflow.com/questions/43242440/javascript-unicode-emoji-regular-expressions">regex</a> which matches the blocks where the newest version of Unicode puts its emoji and their modifiers.</li>
<li>Iterate through the grapheme clusters and <a href="https://stackoverflow.com/a/49242754/435253">discard</a> any which contain recognized emoji codepoints. (A grapheme cluster is a base glyph plus all the diacritics and other modifiers which make up the visible character. The example I link to uses Python's regex engine to tokenize and then the <code>emoji</code> package for the database, but Rust is a good example of a language where iterating grapheme clusters is quick and easy via a crate like <a href="https://lib.rs/crates/unicode-segmentation" rel="noreferrer"><code>unicode-segmentation</code></a>.)</li>
</ol>


blocks|key|36600|text|其他的解决方案都没有对我起作用，但我最终找到了css-tricks提供的解决方案。在我的用例中，我在每个markdown标题的末尾添加了一个链接符号，用于直接链接到文章中的部分，但表情符号看起来有点分散注意力。下面的代码允许我让表情符号看起来像一个普通的符号，然后将鼠标悬停在上面时切换回表情符号的外观，这对我的用例来说是完美的。如果您只是想让图标看起来更像一个符号，只需将文本阴影十六进制颜色更改为#000，如第二个示例所示。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|36601|.direct-link+{
++color:+transparent;
++text-shadow:+0+0+#dbe2ec;
}

.direct-link:hover+{
++color:+inherit;
}|code-block|syntax|javascript|36602|<h3>Blog+Subheading<a+href='#'+class="direct-link"></a></h3>|36603|​|36604|36605|+++.direct-link+{
++++++color:+transparent;
++++++text-shadow:+0+0+#000;
++++}|36606|++++<h3>Blog+Subheading<a+href='#'+class="direct-link"></a></h3>|36607|36608|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/emojis-as-icons/^0|N|A|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|F|7|14|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|C|$]]|$1|M|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|N|3|O|5|F|7|18|8|@]|9|@]|C|$G|H]]|$1|P|3|Q|5|F|7|19|8|@]|9|@]|C|$G|H]]|$1|R|3|L|5|6|7|1A|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]]]

<p>None of the other solutions worked for me but I eventually found something that did courtesy of <a href="https://css-tricks.com/emojis-as-icons/" rel="nofollow noreferrer">css-tricks</a>. In my use case, I was adding a link symbol at the end of each markdown header for direct linking to sections within articles but the emoji symbol looked a bit distracting. The following code allowed me to make the emoji look like a plain symbol and then switch back to looking like an emoji when hovered over which was perfect for my use case. If you just want to make the icon look more like a symbol just change the text-shadow hexadecimal color to #000 as shown in the second example.
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.direct-link {
  color: transparent;
  text-shadow: 0 0 #dbe2ec;
}

.direct-link:hover {
  color: inherit;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h3&gt;Blog Subheading&lt;a href='#' class="direct-link"&gt;&lt;/a&gt;&lt;/h3&gt;</code></pre>
</div>
</div>
</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>   .direct-link {
      color: transparent;
      text-shadow: 0 0 #000;
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;h3&gt;Blog Subheading&lt;a href='#' class="direct-link"&gt;&lt;/a&gt;&lt;/h3&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2712100|text|Android字体并不像你想象的那样丰富。字体文件没有这些异国情调的字形，Android有一些没有字形的字符的hack。它们会被图标所取代。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2712101|因此，解决方案是将站点与web字体(woff)集成。使用FontForge创建新的字体文件，并从自由衬线中选择所需的字形。每个字形都需要1k。生成woff文件。|2712102|准备简单的CSS来导入自定义字体系列。|2712103|style.css：|2712104|@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;
}|code-block|syntax|javascript|2712105|index.html文件：|2712106|<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>|2712107|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|V|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|Y|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Android fonts are not rich as you may expect.
Font files don't have these exotic glyph and Android has a hack for few characters without glyph. They are replaced with icons.</p>

<p>So solution is to integrate the site with a web font (woff).
Create new font file with FontForge and pick required glyph from free serif TTF for example. Every glyph takes 1k. Generate woff file.</p>

<p>Prepare simple CSS to import the custom font family.</p>

<p>style.css:</p>

<pre><code>@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;
}
</code></pre>

<p>index.html file:</p>

<pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;link href="style.css" rel="stylesheet"&gt;&lt;/head&gt;
    &lt;title&gt;Test custom glyphs&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table&gt;
      &lt;tr&gt;
        &lt;td class="exotic-symbol-font"&gt;
             ☠ &amp;#x2660; a  g
        &lt;/td&gt;       
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|2502321|text|Google+Chrome，桌面版本75，似乎消除了基于加载页面时遇到的第一个Unicode转义来呈现Unicode字符的方法。例如，当被解析为页面源代码中的第一个HTML+Unicode转义，并且没有与emoji等效的表情时，⏷似乎向Chrome澄清了页面包含转义，而不是渲染为emoji。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2502322|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Google Chrome, desktop version 75, seems to disambiguate its approach to rendering Unicode characters based on the first Unicode escape it encounters while loading a page. For instance, when parsed as the first HTML Unicode escape in a page source, and having no emoji equivalent, &amp;#9207; seems to clarify to Chrome that the page contains escapes not to be rendered as emoji.</p>


blocks|key|2712305|text|在ssokolow's+answer的基础上扩展，使用滤镜是很好的，至少使轮廓可见，而不是使用简单的字体，但当您想要使用特定颜色时，将RGB颜色转换为CSS滤镜序列是非常困难的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2712306|一个更好的选择(虽然比较繁琐)是使用+SVG过滤器。结合灰度过滤器和数据URI方案，您可以通过RGB和内联CSS表示颜色：|2712307|.violet+{
++color:+white;
++filter:+grayscale(100%25)+url("data:image/svg%2Bxml,<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");
}|code-block|syntax|javascript|2712308|不幸的是，您不能使用数据(取自属性或变量)对URL进行插值，但至少您不必从RGB计算CSS过滤器。|2712309|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/59467709/1424244^0|1|H|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|C|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

<p>Expanding upon <a href="https://stackoverflow.com/a/59467709/1424244">ssokolow's answer</a>, using a filter is nice and at least makes the contours visible instead of using a simple font, but converting an RGB color into a sequence of CSS filters is very hard when you want to use a specific color.</p>

<p>A better (although quite wordy) option is to use the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix" rel="nofollow noreferrer"><code>&lt;feColorMatrix&gt;</code></a> SVG filter. Combined with the grayscale filter and the data URI scheme, you can represent the color via RGB and in-line CSS:</p>

<pre class="lang-css prettyprint-override"><code>.violet {
  color: white;
  filter: grayscale(100%) url("data:image/svg+xml,&lt;svg xmlns='http://www.w3.org/2000/svg'&gt;&lt;filter id='f'&gt;&lt;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'/&gt;&lt;/filter&gt;&lt;/svg&gt;#f");
}
</code></pre>

<p>Unfortunately, you cannot interpolate the URL with data (taken from attributes or variables), but at least you don't have to calculate CSS filters from RGB.</p>


blocks|key|34961|text|我对这个问题的具体描述|type|unstyled|depth|inlineStyleRanges|entityRanges|data|34962|我的站点使用pseudo-elements+(::after和::before)中的◀︎(黑色向右三角形)和类似的字符来表示列表中的当前项目。|offset|length|style|BOLD|CODE|34963|在我的测试中，我总是使用the+triangle+character+and+the+variation+selector+15+together。首先，我使用的是Google+Fonts的webfont和设备上安装的字体，这两种字体都应该包含这些字符的字形，但由于某种原因，这种假设肯定是错误的。我还在谷歌字体上尝试了不同的子集，但都无济于事:我的两台装有谷歌Chrome和三星互联网(Chromium)的安卓设备总是呈现表情符号，而不是文字字形。|34964|我的解决方案|34965|我的解决方案是下载Gnu+Free+Font的最新WOFF+(我知道它包含这些字符的字形)，将其包含在我的项目中，并使用@font-face定义它|34966|@font-face+{
++font-family:+"Free+Sans";
++src:+url("/site/static/fonts/FreeFont/FreeSans.woff")+format("woff");
}|code-block|syntax|javascript|34967|然后，为我的伪元素设置样式：|34968|span.current::after+{
++font-family:+"Free+Sans",+$universal-font-family+!+important;
}|34969|讨论|34970|我还不确定仅为这几个字符使用786K大小的额外字体对性能的影响。如果这成为一个问题，应该可以使用精简的自定义字体，而只使用这些字符。|34971|entityMap|0|LINK|mutability|MUTABLE|url|https://www.fontspace.com/unicode/analyzer#e=4pa277iO|1|https://fonts.google.com/|2|http://ftp.gnu.org/gnu/freefont/?C=M;O=D^0|0|6|F|N|7|V|8|0|2N|7|31|38|C|1P|0|2A|C|1|0|0|6|0|0|21|1O|A|9|D|2|0|0|0|E|0|0|0|2|0|0|1U|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1E|8|@$D|1F|E|1G|F|G]|$D|1H|E|1I|F|H]|$D|1J|E|1K|F|H]]|9|@]|A|$]]|$1|I|3|J|5|6|7|1L|8|@$D|1M|E|1N|F|G]|$D|1O|E|1P|F|G]]|9|@$D|1Q|E|1R|1|1S]|$D|1T|E|1U|1|1V]]|A|$]]|$1|K|3|L|5|6|7|1W|8|@$D|1X|E|1Y|F|G]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1Z|8|@$D|20|E|21|F|G]|$D|22|E|23|F|H]]|9|@$D|24|E|25|1|26]]|A|$]]|$1|O|3|P|5|Q|7|27|8|@]|9|@]|A|$R|S]]|$1|T|3|U|5|6|7|28|8|@$D|29|E|2A|F|G]]|9|@]|A|$]]|$1|V|3|W|5|Q|7|2B|8|@]|9|@]|A|$R|S]]|$1|X|3|Y|5|6|7|2C|8|@$D|2D|E|2E|F|G]]|9|@]|A|$]]|$1|Z|3|10|5|6|7|2F|8|@$D|2G|E|2H|F|G]]|9|@]|A|$]]|$1|11|3|-4|5|6|7|2I|8|@]|9|@]|A|$]]]|12|$13|$5|14|15|16|A|$17|18]]|19|$5|14|15|16|A|$17|1A]]|1B|$5|14|15|16|A|$17|1C]]]]

<h2>My specific version of the problem</h2>
<p>My site is using the ◀︎ (BLACK RIGHT-POINTING TRIANGLE) and similar characters in CSS <strong>pseudo-elements</strong> (<code>::after</code> and <code>::before</code>) to indicate the current item in a list.</p>
<p>In my tests, I always used <a href="https://www.fontspace.com/unicode/analyzer#e=4pa277iO" rel="nofollow noreferrer">the triangle character and the variation selector 15 together</a>. First I was using both a <strong>webfont</strong> from <a href="https://fonts.google.com/" rel="nofollow noreferrer">Google Fonts</a> and a <strong>font installed on the device</strong> that should both have contained the glyphs for those characters, but for some reason, this assumption must have been wrong. I also tried different subsets on Google Fonts, to no avail: Two of my android devices with Google Chrome and Samsung Internet (Chromium) always rendered the emoji instead of the text glyph.</p>
<h2>My solution</h2>
<p>My solution was to download the latest WOFF of the <a href="http://ftp.gnu.org/gnu/freefont/?C=M;O=D" rel="nofollow noreferrer">Gnu Free Font</a> (which I knew to contain glyphs for those characters), include it in my project, and define it using <code>@font-face</code>:</p>
<pre><code>@font-face {
  font-family: &quot;Free Sans&quot;;
  src: url(&quot;/site/static/fonts/FreeFont/FreeSans.woff&quot;) format(&quot;woff&quot;);
}
</code></pre>
<p>Then, to set the styles for my pseudo elements:</p>
<pre><code>span.current::after {
  font-family: &quot;Free Sans&quot;, $universal-font-family ! important;
}
</code></pre>
<h2>Discussion</h2>
<p>I'm not yet sure about the performance impact of using that 786K extra font just for those few characters. If that becomes a problem, it should be possible to use a stripped-down custom font with just those characters instead.</p>


blocks|key|2502016|text|我不知道有什么方法可以关闭emoji类型的渲染。我通常使用图标字体，如font+awesome或glyphicons+(随Bootstrap3提供)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2502017|与unicode字符相比，使用这些字符的好处是|2502018|2502019|您可以从许多不同的样式中进行选择，使其适合您的网站设计；|ordered-list-item|2502020|它们在不同的浏览器中是一致的(如果您曾经尝试使用unicode星形字符，您会注意到在IE和其他unicode中它们是完全可设置样式的，就像您尝试使用的unicode字符一样。|2502021|2502022|唯一的缺点是，当浏览器查看您的页面时，这是另一件需要下载的事情。|2502023|entityMap|0|LINK|mutability|MUTABLE|url|https://fortawesome.github.io/Font-Awesome/|1|http://getbootstrap.com/components/#glyphicons^0|Z|C|0|1C|A|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]|$A|12|B|13|1|14]]|C|$]]|$1|D|3|E|5|6|7|15|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|16|8|@]|9|@]|C|$]]|$1|G|3|H|5|I|7|17|8|@]|9|@]|C|$]]|$1|J|3|K|5|I|7|18|8|@]|9|@]|C|$]]|$1|L|3|-4|5|6|7|19|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|1A|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1B|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]|W|$5|R|S|T|C|$U|X]]]]

<p>I dont know of a way to turn off the emoji type rendering. Usually I use an icon font such as <a href="https://fortawesome.github.io/Font-Awesome/" rel="nofollow">font awesome</a> or <a href="http://getbootstrap.com/components/#glyphicons" rel="nofollow">glyphicons</a> (comes with Bootstrap 3).</p>

<p>The benefit of using these over the unicode characters is that</p>

<ol>
<li>you can choose from many different styles so it fits the design of your site;</li>
<li>they are consistent across browsers (if you ever tried doing a unicode star character, you'll notice it's different in IE vs other browser);</li>
<li>also, they are fully stylable, like the unicode characters you're trying to use.</li>
</ol>

<p>The only downside is that its one more thing for the browser to download when they view your page.</p>


blocks|key|36436|text|对于我在OSX上的解决方案是将font-family设置为EmojiSymbols|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|36437|entityMap^0|T|C|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>For me on OSX the solution was to set font-family to <code>EmojiSymbols</code></p>


blocks|key|34832|text|上面的解决方案都不适用于"Emoji+for+Google+Chrome“扩展。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|34833|因此，作为一个变通方法，我为Unicode字符‘’(U%2B2611)制作了一个屏幕截图，并将其添加为图像：|34834|+$ballotBoxWithCheck='<img+src="pics/U2611.png"+style="height:11px;margin-bottom:-1px">';+#+&#9745;+or+/U2611|code-block|syntax|javascript|34835|​|34836|📷|atomic|offset|length|34837|34838|请参阅：https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel|34839|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/4409fa8c16fe978dff4d00cb33d1ee00.png|imageAlt|1|LINK|MUTABLE|url|https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel^0|0|0|0|0|0|1|0|0|0|4|1Z|1|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|18|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|19|8|@]|9|@]|A|$]]|$1|K|3|L|5|M|7|1A|8|@]|9|@$N|1B|O|1C|1|1D]]|A|$]]|$1|P|3|J|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1F|8|@]|9|@$N|1G|O|1H|1|1I]]|A|$]]|$1|S|3|-4|5|6|7|1J|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z|10|-4]]|11|$5|12|W|13|A|$14|15]]]]

<p>None of the solutions above worked for the "Emoji for Google Chrome" Extension.</p>

<p>So <strong>as a workaround</strong> I made a screenshot of the Unicode Character 'BALLOT BOX WITH CHECK' (U+2611) and added it as image with php:</p>

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

<p><a href="https://i.stack.imgur.com/PBFg2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PBFg2.png" alt="enter image description here"></a></p>

<p>See: <a href="https://spacetrace.org/man_card.php?tec_id=21&amp;techname=multi-emp-vessel" rel="nofollow noreferrer">https://spacetrace.org/man_card.php?tec_id=21&amp;techname=multi-emp-vessel</a></p>


<p>I'm finding Unicode for special characters from <a href="http://www.fileformat.info/info/unicode/char/search.htm" rel="noreferrer">FileFormat.Info's search</a>. </p>

<p>Some characters are rendering as the classic black-and-white glyphs, such as ⚠ (warning sign, <code>\u26A0</code> or <code>&amp;#x26a0;</code>). These are preferable, since I can apply CSS styles (such as color) to them. </p>

<p><a href="https://i.stack.imgur.com/mRrUw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/mRrUw.png" alt="image of warning glyph"></a></p>

<p>Others are rendering as newer cartoony emoji, such as ⌛ (hourglass, <code>\u231B</code> or <code>&amp;#x231b;</code>). These are not preferable, since I cannot fully style them. </p>

<p><a href="https://i.stack.imgur.com/niqCz.png" rel="noreferrer"><img src="https://i.stack.imgur.com/niqCz.png" alt="image of hourglass emoji"></a></p>

<p>It appears that the browser is making this change, since I'm able to see the hourglass glyph on Mac Firefox, just not Mac Chrome nor Mac Safari. </p>

<p>Is there a way to force browsers to display the older (flat monotone) versions to display? </p>

<p><strong>Update</strong>: It seems (from comments below) there is a <a href="http://www.unicode.org/reports/tr51/#def_text_presentation_selector" rel="noreferrer">text presentation selector</a>, <code>FE0E</code>, available to enforce text-vs-emoji. The selector is concatenated as a suffix without space onto the character's code, such as <code>&amp;#x231b;&amp;#xFE0E;</code> for HTML hex or <code>\u231B\uFE0E</code> for JS. However, <em>it is simply not honored by all browsers</em> (eg Chrome and Edge).</p>


How to prevent Unicode characters from rendering as emoji in HTML from JavaScript?

我正在从中找到表示特殊字符的Unicode。某些字符呈现为经典的黑白字形，例如\u26A0 (警告符号、&#x26a0;或⚠)。这些是可取的，因为我可以对它们应用CSS样式(如颜色)。​​另一些则呈现为较新的卡通表情符号，如沙漏、\u231B或&#x231b;(⌛)。这些不是最好的，因为我不能完全样式化它们。​​浏览器似乎做了这样的改变，因为我可以在Mac Firefox上看到沙漏字形，但在Mac

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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