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

Question

请参考this jsfiddle。

它包括文本，无论是在 highcharts 图表内部还是外部，其中文本包括一个“太阳”字符，如 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 中，您会看到部分普通和部分表情符号：

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

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

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

Answer 1

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

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

* {font-family:serif !important}

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

更新

我要澄清几点：

1. 没有“安全”或“不安全”字体。
2. 基本上字体就像一个key-value存储{code1 => glyph1, code2 => glyph2, ...}，输入一个code得到对应的字形
3. 字体可能包含也可能不包含任何代码字形对
4. 您可以制作自己的字体，只包含所需的符号，将您选择的代码与您选择的字形相关联，例如\u263d 可以是您想要的任何字形，但并不总是 moon
5. 在 css font-family: 中，您可以指定一个或多个字体系列和/或通用系列 (look here)。当样式应用于文本时，浏览器会将每个符号 ('A', ' ' or '\u263d') 转换为其代码，并尝试从指定的字体系列中获取字形，直到找到字形或没有剩余字体为止。
   如果字体包含所需的代码-字形对，我们可以看到一个字形，否则 - 我们可以看到一个空格、?、一个轮廓矩形、一个包含代码的矩形等（取决于浏览器）。

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

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

希望它有用且清晰。

Answer 2

Kosh Very 的回答有点儿意思。事实上，将所有元素的字体系列更改为衬线确实会导致在高图表中使用普通符号，即使在 Android 7 中也是如此。问题是，在实际使用中我不能坚持使用单一的“安全”字体系列......用户可以从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 值都有一个字符）时，它会恢复为使用系统字体中的字符？从其他讨论看来，这些彩色表情符号可能只在三星设备上显示，所以三星的系统字体可能有这些？

解决方案（或解决方法）似乎是仅在需要时使用“安全字体”（用于图形字符），并在其他地方使用您想要的字体，根据 this updated jsfiddle，它在 Android 7 Chrome 上给出以下结果：

但是我遇到了这个解决方案的障碍......它适用于上面的太阳符号，但对于下一个 unicode 字符（月亮符号）它没有...... . 因此，serif 字体系列中可能缺少该符号，它会再次恢复为系统表情符号。

jsfiddle with moon

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

即使对于像 Cardo 这样的字体，apparently supports 月亮字符 \u263d、this example 在 Android Chrome 中也不起作用......仍然会得到彩色表情符号版本而不是普通版本。