How to prevent Unicode characters from rendering a

2019-01-03 06:02发布

站内问答 / JavaScript
1777 6 6

I'm finding Unicode for special characters from FileFormat.Info's search.

Some characters are rendering as the classic black-and-white glyphs, such as ⚠ (warning sign, \u26A0 or ⚠). These are preferable, since I can apply CSS styles (such as color) to them.

image of warning glyph

Others are rendering as newer cartoony emoji, such as ⌛ (hourglass, \u231B or ⌛). These are not preferable, since I cannot fully style them.

image of hourglass emoji

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.

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

Update: It seems (from comments below) there is a text presentation selector, FE0E, available to enforce text-vs-emoji. The selector is concatenated as a suffix without space onto the character's code, such as ⌛︎ for HTML hex or \u231B\uFE0E for JS. However, it is simply not honored by all browsers (eg Chrome and Edge).

6条回答
三岁会撩人
2楼-- · 2019-01-03 06:11

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.

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.

Prepare simple CSS to import the custom font family.

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 file:

<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">
查看更多
0人赞 添加讨论(0) 举报
家丑人穷心不美
3楼-- · 2019-01-03 06:11

None of the solutions above worked for the "Emoji for Google Chrome" Extension.

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

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

enter image description here

See: https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel

查看更多
0人赞 添加讨论(0) 举报
贪生不怕死
4楼-- · 2019-01-03 06:20

Append the Unicode variation selector character for forcing text, VS15, &#xFE0E;.
This forces the previous character to be rendered as text rather than as an Emoji Symbol. 

<p>
查看更多
0人赞 添加讨论(0) 举报
Deceive 欺骗
5楼-- · 2019-01-03 06:20

For me on OSX the solution was to set font-family to EmojiSymbols

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
6楼-- · 2019-01-03 06:24

I had such a Unicode character as span::before content. Chrome used "Segoe UI Emoji" as the font to render it. Even when i set the font family to "Segoe UI Symbol", it didn't work.

But, when I set the font-family to "Segoe UI Symbol" explicitly for the span::before, rather than just for the span, then it worked.

查看更多
0人赞 添加讨论(0) 举报
Viruses.
7楼-- · 2019-01-03 06:26

I dont know of a way to turn off the emoji type rendering. Usually I use an icon font such as font awesome or glyphicons (comes with Bootstrap 3).

The benefit of using these over the unicode characters is that

  1. you can choose from many different styles so it fits the design of your site;
  2. 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);
  3. also, they are fully stylable, like the unicode characters you're trying to use.

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

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)