使用非表情符号版本的unicode字符(highcharts和plain html)
drm*_*wer 6 html css unicode highcharts emoji
请参考这个jsfiddle.
它包括文本,包括高图表和外部文本,其中文本包含此页面中显示的"太阳"字符.我还包括有和没有变异选择器的变体(也见这里),看看他们有什么不同.
在highcharts之外:
<p>Embedded: ☼ ☼︎ ☼️</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意味着是字符编码而不是表情符号编码？我对可爱的表情符号本身没有任何反对意见,但仅限于正确的情境.
符号的外观取决于您使用的字体。
请查看您更新的jsfiddle。我刚刚更改了所有元素的字体：
* {font-family:serif !important}
任何元素都可以有自己的字体。
使用哪种字体取决于您。因此，选择合适的并进行调整。
更新
我必须澄清几点：
- 没有“安全”或“不安全”字体。
- 基本上字体的工作原理就像一个键值存储
{code1 => glyph1, code2 => glyph2, ...}，输入一个代码并获取相应的字形 - 字体可能包含也可能不包含任何代码字形对
- 您可以制作自己的字体，仅包含所需的符号，将您选择的代码与您选择的字形相关联，例如
\u263d可以是您想要的任何字形，但并不总是moon - 在 css 中，
font-family:您可以指定一个或多个字体系列和/或通用系列（请参见此处）。当样式应用于文本时，浏览器将每个符号 ('A', ' ' or '\u263d') 转换为其代码，并尝试从指定的字体系列获取字形，直到找到字形或不再有字体为止。
如果字体包含所需的代码字形对，我们可以看到字形，如果没有，我们可以看到空格、？、轮廓矩形、内部包含代码的矩形等（取决于浏览器）。
在这种情况下：浏览器在 generic-family 的所有系统字体中{font-family:serif} for \u263d搜索字形。在 Android 上，它首先会找到您命名的“表情符号”。\u263dserif
解决方案是找到（参见jsfiddle）或制作（参见另一个 jsfiddle）具有所需字形的字体并将其应用到所需的元素。
希望它有帮助且清晰。