使用非表情符号版本的 unicode 字符（highcharts 和 plain html）

Question

它包括 highcharts 图表内部和外部的文本，其中文本包括一个 "sun" 字符，如 this page. I've also included variants both with and without variation selectors (see also here 所示）以查看它们有什么不同。

外部高位图：

<p>Embedded: &#x263C; &#x263C;&#xFE0E; &#x263C;&#xFE0F;</p>
symbols.innerHTML = '<p>Added: \u263C \u263C\uFE0E \u263C\uFE0F</p>';

内高图：

title: {
    text: 'In highcharts: \u263C \u263C\uFE0E \u263C\uFE0F'
},

现在，似乎取决于您查看此 jsfiddle 的浏览器是太阳符号的彩色表情符号版本，还是纯文本黑色版本...甚至两者个版本！

例如，在 Windows 桌面 上的 Chrome 中，您将获得全面的普通版本：

...而在 Android 7 上的 Chrome 中，您会得到部分纯文本和部分表情符号：

我真的不喜欢表情符号版本的样式完全不受我的控制，尤其是当样式与页面的其余部分发生严重冲突时（例如，太阳符号是亮橙色而等效的月亮符号是亮蓝色）。

所以我想强制该页面在所有上下文中的所有浏览器上使用 普通版本 ...知道怎么做吗？

不得不求助于图像似乎是完全疯狂的，因为我希望符号与周围的文本具有相同的外观，包括文本颜色（用户可以随意更改）。 UTF-8 难道不是 character 编码而不是 emoji 编码吗？我并不反对可爱的表情符号本身，但前提是在正确的上下文中。

Answer 1

符号的外观取决于您使用的字体。

请查看您的更新 jsfiddle。我刚刚更改了所有元素的字体：

* {font-family:serif !important}

任何元素都可以有自己的字体。
使用哪种字体取决于您。因此，选择合适的并进行调整。

更新

我要澄清几点：

有 NO 'safe' 或 'unsafe' 字体。
基本上字体就像一个键值存储{code1 => glyph1, code2 => glyph2, ...}，输入一个代码并得到相应的字形
字体可能包含也可能不包含任何代码字形对
您可以制作自己的字体，只包含所需的符号，将您选择的代码与您选择的字形相关联，例如\u263d 可以是任何你想要的字形，并不总是 moon
在 css font-family: 中，您可以指定一个或多个字体系列 and/or 通用系列 (look here)。当样式应用于文本时，浏览器将每个符号 ('A', ' ' or '\u263d') 转换为其代码，并尝试从指定的字体系列中获取字形，直到找到字形或没有更多字体为止。
如果字体包含所需的代码字形对，我们可以看到一个字形，如果没有 - 我们可以看到一个 space、?、一个带轮廓的矩形、一个内部有代码的矩形等（取决于浏览器） .

在这种情况下：{font-family:serif} for \u263d 浏览器在通用系列 serif 的所有系统字体中搜索 \u263d 的字形。在 Android 上它首先找到你命名的 'emoji'.

解决方案 是找到（参见jsfiddle) or to make (see the other jsfiddle）具有所需字形的字体并将其应用于所需元素。

希望它对您有所帮助且清晰。

Answer 2

Kosh Very 的回答说到点子上了。事实上，将所有元素上的字体系列更改为衬线确实会导致在 highcharts 中使用普通符号，即使在 Android 7 中也是如此。问题是，在实际使用中我不能坚持使用单个 "safe" 字体系列...字体可以由用户指定，来自 Google fonts.

上列出的任何网络字体

我updated the jsfiddle包括加载和使用网络字体：

// see https://github.com/typekit/webfontloader
WebFont.load({
    google: {
      families: ['Fresca:400']
    }
});

而且我在 highcharts 内外都使用这种字体。 Windows Chrome 上的结果和以前一样（全是纯文本符号），但是现在 Android 7 Chrome 上的结果是：

所以这现在更像是表明问题毕竟不是 highcharts 特有的，更多的是字体问题，如 Kosh Very 所示。事实上，在原始示例中，没有明确说明任何字体，highcharts 中使用的字体与外部使用的字体不同......因此可能是符号样式的差异。

但我在更新的 jsfiddle 示例中尝试了其他几种完全不同的网络字体，结果相同。换句话说，表情符号太阳符号显然不是来自字体本身。也许当字体缺少特定字符时（这些字体可能没有每个 unicode 值的字符）然后它恢复使用系统字体中的字符？从其他讨论来看，这些彩色表情符号似乎只能在三星设备上显示，所以三星的系统字体可能有这些？

解决方案（或变通方法）似乎是仅在需要时（对于图形字符）使用 "safe font"，并根据 this updated jsfiddle 在其他地方使用您想要的字体，结果如下关于 Android 7 Chrome:

但是我遇到了这个解决方案的障碍......它对上面的太阳符号很好地工作，但对于下一个 unicode 字符（月亮符号）它没有...所以也许 serif 字体系列中缺少该符号，它再次恢复为系统表情符号。

jsfiddle with moon

所以解决方案可能仍然非常不完整...可能仅限于某些符号。

即使像 Cardo 这样 apparently supports the moon character \u263d, this example 在 Android 中不起作用的字体 Chrome... 仍然得到彩色表情符号版本而不是普通版本。

使用非表情符号版本的 unicode 字符（highcharts 和 plain html）

Use non-emoji version of unicode character (highcharts and plain html)

html

css

unicode

highcharts

emoji