Use non-emoji version of unicode character (highcharts and plain html)

Question

Please refer to this jsfiddle.

It includes text, both inside a highcharts chart and outside, where the text includes a "sun" character as shown in this page. I've also included variants both with and without variation selectors (see also here) to see what difference they make.

Outside highcharts:

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

Inside highcharts:

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

Now, it seems to depend on which browser you view this jsfiddle as to whether you get a coloured emoji version of the sun symbol, or a plain-text black version... or even both versions!

For example, in Chrome on a Windows desktop you get the plain version all round:

... while in Chrome on Android 7 you get part-plain and part-emoji:

I really don't like that the style of the emoji versions is completely out of my control, particularly when the style clashes horribly with the rest of the page (e.g. the sun symbol is bright orange and the equivalent moon symbol is bright blue).

So I'd like to force the page to use the plain version on all browsers in all contexts... any idea how?

It would seem completely crazy to have to resort to using images, because I want the symbols to have the same appearance as the surrounding text, including text colour (which the user can change at will). And isn't UTF-8 meant to be a character encoding rather than an emoji encoding? I have nothing against cute emojis per se, but only in the right context.

Answer 1

The symbols appearance depends on the font you use.

Please look at your updated jsfiddle. I've just changed the font on all elements:

* {font-family:serif !important}

Any element can have its own font.
It's up to you which font to use. So choose the right one and tune it up.

Update

I have to clarify several points:

1. There are NO 'safe' or 'unsafe' fonts.
2. Basically font works like a key-value storage {code1 => glyph1, code2 => glyph2, ...}, input a code and get the corresponding glyph
3. Font may or may not contain any code-glyph pair
4. You can make your own font containing only desired symbols, having codes of your choice associated with glyphs of your choice e.g. \u263d can be any glyph you want, not always the moon
5. In css font-family: you can specify one or several font-families and/or generic-families (look here). When the style's being applied to the text the browser converts each symbol ('A', ' ' or '\u263d') to its code and tries to get the glyph from the specified font-families until the glyph has been found or no more fonts have left.
   If the font contains the desired code-glyph pair we can see a glyph, if not - we can see a space, ?, an outlined rectangle, a rectangle with the code inside, etc. (depends on the browser).

In this case: {font-family:serif} for \u263d browser searches for the glyph for \u263d in all system fonts of generic-family serif. And on Android it firstly finds what you name the 'emoji'.

The solution is to find (see the jsfiddle) or to make (see the other jsfiddle) a font with the desired glyphs and apply it to the desired elements.

Hope it's helpful and clear.