Fallback web fonts for unicode circles (●◐○)

Question

To display a rating on a web page, I would like to use unicode circles, for example: ●●●◐○

This uses the following code points from the geometric shapes unicode block:

● U+25CF (BLACK CIRCLE)

◐ U+25D0 (CIRCLE WITH LEFT HALF BLACK)

○ U+25CB (WHITE CIRCLE)

However, the result obviously depends on the available fonts.

Some fonts do not support all code points, some have non-uniform sizes and/or positions for the symbols, and some fonts show the "CIRCLE WITH LEFT HALF BLACK" without a border. See e.g. preview on google fonts.

My question is this:

Is there a single font that is available by default on Windows, iOS, Android, and common Linux distributions, that meets the following requirements?

• supports these three code points (●◐○)
• circles have uniform size
• half circle has a border

If not, what would be the proper fallback fonts to use for each of these platforms?

Note: I can also do this using e.g. svg images, but using unicode characters is much more convenient.

Answer 1

I don't think there are any fonts that you can reasonably expect to find on every system. Why not just include your own font defining these three glyphs? Or just use the one below. It only took a few minutes to draw in FontForge.

@font-face {
    font-family: UniCircles;
    src: url(data:application/font-woff2;base64,d09GMgABAAAAAAJ8AA0AAAAABkgAAAIlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cBmAAglIIBBEICoF8gUMLDgABNgIkAxQEIAWDVAcgGx4FIC4G7MblQspYm5k1jxUBoCHj8P5RxHjof792Z95fRC2LVRLJJEQilM4hJEqgVPEomtraf5fOXOED7bj7Zv+VFMAAlWYes4CHDkMQSvgbcM37ZdsaB9RUgBtGN0YjTKA7NR95G4epNp7/dWtxb0/gGYR4gaSXN1FxHF4sUat/fAU6OCxADozSbQoefbKWGOIRRBA6IeB962wGvnsFiTnVzKCUdExQkpekAVey4/hHChKkWjMAMAWA/TObH0tg/i2vHeciRIUAwBSioGAMwTaywJjCImjSJGH+cXhzH+L1F0586j5nBCAaIACRIAEAAV6nswKi7hI0gDY0Yx3sA6hASqSQlXBGm8ZgU7kUBxNYqRqP4uyk8K7d9XDb2wxeve1w3V0NOpr5+gHLIqg1+6puj7d4JzcO2uG8qC8wdyrWdQb3/186usV4oU2h8fjxgEBwfaH5PjpN/yY2+XdO/aF+UeVCQJMEQen2nUsaKFMgAKAqaWoSdoEvAQg06JKBRAhsAqDDDQJIAUKLYQSp0SqCYsETQaXFLQhquvwQNGgJKXJRMQEUoU+O1GEOxTYTKn1eqJnyoTfoCypwIinCIiLLJy4gByfnkRZx68ChgJCCOI8s9C3rA1tSkvLLN2eFBKiYSGp7de402DWLYKTAKE/wAZNdyIYCKouq93UNkd/YEsZwUw8tWJxuy8qJSElSEUkiWVXD26qWUhTG1mlvK0A9BgIAAAAA) format('woff2');
    font-weight: normal;
    font-style: normal;
}
body {
    font-family: UniCircles, sans-serif;
}

You can try it out here: https://jsfiddle.net/867xnw4d/

This is what it looks like:

Answer 2

While this does not use unicode characters as per your question, you could also use some CSS like so:

<i class="half-moon"></i> <i class="full-moon"></i> <i class="new-moon"></i>

i[class*="moon"] {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: .25em solid;
    border-radius: 1em;}

i[class*="moon"]::before {
    display: block;
    content: "";
    height: 1em;
    background: #000;}

i.half-moon::before {width: .5em;}
i.full-moon::before {width: 1em;}
i.new-moon::before  {width: 0;}

This might be useful in some cases. Adapt according to your needs.