使用非表情符号版本的Unicode字符（Highcharts和普通HTML）

Question

使用非表情符号版本的Unicode字符（Highcharts和普通HTML）

6

请参考this jsfiddle。其中包含文本，既在highcharts图表内部，也在外部，文本中包含“太阳”字符，如this page所示。我还包括了带有变异选择器的变体和不带变异选择器的变体（另请参见这里），以查看它们的区别。

highcharts外部：

<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难道不应该是一个字符编码，而不是表情符号编码吗？我并不反对可爱的表情符号本身，但只有在正确的上下文中。

- drmrbrewer

1

这并不是Highcharts的问题，因为在纯HTML中您将会遇到相同的行为。您可以尝试此主题中的答案：https://dev59.com/ZFwY5IYBdhLWcg3wLFOw 如果不起作用，您可以使用图片代替表情符号，并使用渲染器在正确位置呈现图片。http://api.highcharts.com/highcharts/Renderer.image - morganfree

@morganfree 是的，我已经看过那个主题了，事实上我在我的帖子中链接了其中一个答案的来源...基本上它们依赖于“版本选择器”。但在我的情况下似乎没有任何区别，这让我想知道是否需要为highcharts应用程序提供不同的解决方案。使用图片而不是文本似乎是一种巨大的浪费...肯定有其他方法吧？ - drmrbrewer

@ morganfree，我现在相信这实际上是一个Highcharts问题，或者至少部分是。请参见我的编辑帖子，第二个例子......在Android Chrome浏览器上，符号在Highcharts之外呈现为纯文本，但在Highcharts内部呈现为表情符号！ - drmrbrewer

2个回答

1

Kosh Very的回答指出了一些问题。确实，将所有元素的字体族更改为衬线字体确实会导致在高图中使用普通符号，即使在Android 7上也是如此。问题是，在实际使用中，我不能坚持使用单个“安全”的字体族...字体可以由用户指定，来自Google fonts列出的任何Web字体。

我已经更新了jsfiddle以包括加载和使用Web字体。

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

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

这似乎表明问题并非仅适用于highcharts，更可能是像Kosh Very所说的字体问题。实际上，在原始示例中，没有显式指定任何字体时，highcharts使用的字体与外部使用的字体不同，因此符号风格也不同。

但是，在更新的jsfiddle示例中，我尝试了其他完全不同的网络字体，结果相同。换句话说，表情太阳符号似乎并不是来自字体本身。也许当字体缺少某个特定字符（这些字体可能没有每个unicode值的字符）时，它会回退到使用系统字体中的字符？从其他讨论中可以看出，这些带颜色的表情符号可能仅在三星设备上显示，因此三星的系统字体可能具有这些表情符号？

解决方案（或解决方法）似乎是仅在必要时使用“安全字体”（用于图形字符），并在其他地方使用所需的字体，如this updated jsfiddle所示，在Android 7 Chrome上产生以下结果：

但是，我在这个解决方案上遇到了问题......它对于上面的太阳符号很好地工作，但对于下一个unicode字符（月亮符号）却不行......所以也许那个符号在serif字体族中缺失，它又回到了系统表情符号。

jsfiddle with moon

所以解决方案可能仍然非常零散... 可能仅限于某些符号。即使像 Cardo 这样的字体显然支持月亮字符 \u263d，这个例子在 Android Chrome 中仍然无法正常工作... 仍然会得到彩色表情符号版本而不是普通版本。

- drmrbrewer

1

很遗憾，您在调查中存在一些混淆和误解。请阅读我的更新答案，并查看其中的解决方案jsfiddles。对于第一次不清楚的表述，我感到抱歉。 - Kosh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kosh · Accepted Answer

这段话的意思是：“符号的外观取决于您使用的字体。请查看您更新后的jsfiddle，我刚刚更改了所有元素的字体。”

* {font-family:serif !important}

任何元素都可以有自己的字体。
由您决定使用哪种字体。因此，请选择合适的字体并进行调整。更新我必须澄清几个问题：

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

在这种情况下：{font-family:serif} for \u263d 浏览器会在通用字体族 serif 的所有系统字体中搜索 \u263d 这个字形。而在 Android 上，它首先找到你所称的“表情符号”。 解决方案 是找到（参见 jsfiddle）或制作（参见 other jsfiddle）具有所需字形的字体，并将其应用于所需元素。

希望这很有帮助并且清晰易懂。