Unicode problem in android browser

[web148]

While these (Unicode, I think) characters - ◖ and ◗ are correctly displayed both on a PC browser and on an android browser, these other -  and  - are displayed correctly only on a PC browser, not on android. To be honest even in this Sitepoint post I cannot see them correctly.
The following code  and  doesn’t work.
I add a screenshot, where you can see all the special characters working (on a PC browser).

There is a way to display that symbol as a character, without using an image?

I know that these - ◒ and ◓ - work, but in a PC browser they are quite ugly.

EDIT

They are ugly because of my wrong css (font-family: opensymbol). Commenting that css rule I can now use ◒ and ◓ correctly.

EDIT

Or better: almost solved, because on android they are displayed not as expected (not as on PC). I attach this new screenshot:

[ralphm]

You still have to make sure there’s a font available to each browser that includes those characters. Obviously the best way is to use a web font.

[web148]

Indeed I thought the same… But a web font can be heavy to load, can’t it?

A small svg could be better?

[ralphm]

@web148

a web font can be heavy to load, can’t it?

It can be very light, especially if you just serve up the characters you need. Google fonts let you just download the actual characters you need, for example. I’m not sure how to do this with self-hosted fonts, but it could be worth looking into.

[web148]

But also this could be a solution

 <style>
  .top {
        display: inline-block;
        margin: 0;
        line-height: 0.6em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 50px;
        background: linear-gradient(to bottom, olive 60%, transparent 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
 
 .bottom {
        display: inline-block;
        margin: 0;
        line-height: 0.6em;
        font-family: Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 50px;
        background: linear-gradient(to top, olive 60%, transparent 50%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    </style>
 
 <p>
     <span class="top">◓</span>
     <span class="bottom">◒</span>
 </p>

Found here.

[web148]

However I have a problem with that code: it doesn’t work as expected in android (Vivaldi) browsers.
Even after deleting the browser cache, I still see this

instead of this

Where I’m wrong?

[ralphm]

Maybe it’s easier just to dispense with fonts and do something like this:

span {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  display: inline-block;
  background: linear-gradient(to bottom, black 50%, transparent 50%);
}

I don’t have an Android device to test on though.

[web148]

Thank you. I will try this. (Sorry: I didn’t see notification of your answer)

[web148]

@ralphm

black

A very smart solution. Really. But so far I managed to get it working on a desktop browser, not on an android (Vivaldi) one: nothing appears. Even with a .8em (instead of .5em).

EDIT

Maybe is a cache problem (server side). I will see later.

[PaulOB]

@web148

But so far I managed to get it working on a desktop browser,

Ralph’s code should work in every modern browser as it’s just a basic linear gradient.

[web148]

Yes. I guess that it’s a server side cache problem.

[web148]

Yes: a (server-side) chache problem: now it’s ok.
Thank you very, very much!