Question

它包括高图表和外部的文本，其中文本包含this page中显示的“太阳”字符。我还包括带有和不带variation selectors的变体（另见here），看看它们有什么不同。

外面的高层：

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

在highcharts内部：

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

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

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

...在Android 7的Chrome浏览器中，您可以使用part-plain和part-emoji：

我真的不喜欢表情符号版本的风格完全不受我的控制，特别是当风格与页面的其他部分发生可怕的冲突时（例如，太阳符号是亮橙色，等效的月亮符号是明亮的蓝色）。

所以我想强制页面在所有上下文中的所有浏览器上使用普通版 ...任何想法如何？

不得不求助于使用图像似乎是完全疯狂的，因为我希望符号具有与周围文本相同的外观，包括文本颜色（用户可以随意更改）。并不是UTF-8意味着是字符编码而不是表情符号编码？我对可爱的表情符号本身没什么好处，但只是在正确的背景下。

Answer 1

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

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

* {font-family:serif !important}

任何元素都可以有自己的字体这取决于您使用哪种字体。所以选择正确的并调整它。

<强>更新

我必须澄清几点：

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

在这种情况下：{font-family:serif} for \u263d浏览器会在通用族\u263d的所有系统字体中搜索serif的字形。在Android上，它首先找到你所谓的'表情符号'。

解决方案是查找（请参阅jsfiddle）或制作（请参阅other jsfiddle）带有所需字形的字体并将其应用于所需的元素。

希望它有用而且清晰。

Answer 2

Kosh的答案非常有用。实际上，将所有元素上的font-family更改为serif确实会导致在高级图表中使用普通符号，即使在Android 7中也是如此。问题是，在实际使用中我不能坚持使用单个＆＃34; safe＆＃34;字体系列...字体可以由用户从Google fonts上列出的任何网络字体指定。

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

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

我在高级图表的内部和外部使用该字体。 Windows Chrome上的结果与之前一样（纯文本符号全部显示），但现在Android 7 Chrome中的结果是：

所以现在这个问题显示这个问题毕竟不是特定于高级图表的问题，而且更像Kosh之类的字体问题。实际上，在原始示例中，没有明确说明任何字体，highcharts中使用的字体与外部使用的字体不同......因此可能因此符号样式的差异。

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

解决方案（或解决方法）似乎是使用＆＃34;安全字体＆＃34;仅在需要时（对于图形字符），以及您在其他地方所需的字体，根据this updated jsfiddle，在Android 7 Chrome上显示以下结果：

但是我已经遇到了这个问题的解决方案......它可以很好地适用于上面的太阳符号，但是对于下一个unicode角色（月亮符号）它并没有＆＃39 ; t ...所以也许serif字体系列中缺少该符号，它会再次恢复为系统表情符号。

jsfiddle with moon

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

即使像Cardo这样的字体apparently supports月亮字符\u263d，this example在Android Chrome中无效...仍然可以获得彩色表情符号而不是普通版。

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

2 个答案: