How to understand if a symbol is displayed on a web page?

Question

JavaScript

Always use unicode on the web, they said. It is displayed correctly everywhere and always, they said.
The problem is that in some combinations of system-updates-browsers-fonts-locales the symbol is not displayed. Instead, it's a square.
And it would be okay if these were some hieroglyphs or emojis (which are actually also needed), but in our realities there are problems, for example, with the ruble sign (₽), which appeared recently and depends on system updates. And even if there is an update, it does not appear in FF on my systems.
So the task. You need to test whether a specific character is displayed in the browser or not.
Well, further build logic from this - for example, load a separate font where the desired character is exactly driven in. Or a picture. Or vice versa, replace the picture with a symbol if it can be displayed normally.
Now I use a terrible crutch for this: I draw the desired character with 32 pt on the canvas via context.fillText and check the color of the pixels where they should be painted over for the desired character.
As a rule, it works, although not in all cases, and you also need to write a separate test for each font / character due to the different arrangement of pixels.
At the same time, I am not left with a sense of the wrongness of what is happening.
Does anyone know a simpler or less crutch way to check?

Answer 1

I propose to create your own font, in which there will be only one character you need (to save size).
You don’t even need to deal with font drawing programs - the other day on geektimes the article was geektimes.ru/post/246800