html - 使用非表情符号版本的 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 不是一个字符编码而不是一个表情符号编码吗？我并不反对可爱的表情符号本身，但前提是在正确的上下文中。

Answer 1

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

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

* {font-family:serif !important}

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

更新

我必须澄清几点:

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

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

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

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