How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?-CodePudding

I'm working on a simulation of the Prague Astronomical Clock (

There are, however, clearly non-emoji versions of these characters available:

I've tried this:

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local('Apple Symbol'); // Have tried source other fonts, listing multiple fonts too
  unicode-range: U 263C-2653;
}

.info-panel {
  background-color: $controls-background;
  color: $controls-text;
  font: 14px NoEmojiAstronomy, Arial, sans-serif;
  padding: 0.5em 2.5em 0.5em 0.5em;
  position: relative;

This hasn't helped. I'm still getting the emoji instead. Any ideas how to fix this?

CodePudding user response：

No matter what kinds of font-family you choose .There still will be some emojis which the os didn't suppot. The reason that os can display the emoji is the os builtin fontType has the corresponding code. Different os has different views. Twitter has a library replce emoji to images. Check the example ,you will see the difference.

<script src="https://twemoji.maxcdn.com/v/latest/twemoji.min.js" crossorigin="anonymous"></script>

<body>

    How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?

    <span id="emo">
        How can I prevent these characters ("♈♉♊♋♌♍♎♏♐♑♒♓") from being replaced by emoji?
    </span>
    <script>
        twemoji.parse(document.querySelector('#emo'));
    </script>
</body>

Hope this may help you.

CodePudding user response：

Ah! I just had to try more fonts, using the correct syntax for listing multiple fonts.

@font-face {
  font-family: 'NoEmojiAstronomy';
  src: local("Apple Symbol"), local("Segoe UI Symbol"), local("Arial Unicode MS"), local("Menlo"), local("sans-serif");
  unicode-range: U 263C-2653;
}