Fallback-Webfonts für Unicode-Kreise (●◐○)

Um eine Bewertung auf einer Webseite anzuzeigen, möchte ich Unicode-Kreise verwenden, zum Beispiel: ●●●◐○

Dies verwendet die folgenden Codepunkte aus dem Unicode-Block für geometrische Formen :

● U+25CF (SCHWARZER KREIS)

◐ U+25D0 (KREIS MIT LINKER HÄLFTE SCHWARZ)

○ U+25CB (WEISSER KREIS)

Allerdings hängt das Ergebnis natürlich von den verfügbaren Schriftarten ab.

Einige Schriftarten unterstützen nicht alle Codepunkte, einige haben uneinheitliche Größen und/oder Positionen für die Symbole, und einige Schriftarten zeigen den „KREIS MIT LINKER HÄLFTE SCHWARZ“ ohne Rand. Siehe zB Vorschau auf Google Fonts .

Meine Frage ist folgende:

Gibt es eine einzelne Schriftart, die standardmäßig unter Windows , iOS , Android und gängigen Linux- Distributionen verfügbar ist und die folgenden Anforderungen erfüllt?

  • unterstützt diese drei Codepunkte (●◐○)
  • Kreise haben eine einheitliche Größe
  • Halbkreis hat einen Rand

Wenn nicht, was wären die richtigen Fallback-Schriftarten für jede dieser Plattformen?

Hinweis: Ich kann dies auch mit zB Bildern tun svg, aber die Verwendung von Unicode-Zeichen ist viel bequemer.

Haben Sie gesehen, wie dieser Beitrag auf macOS (Safari, Firefox) gerendert wird: i.stack.imgur.com/fxPKC.png
@Glorfindel: Danke für das Beispiel. Genau das möchte ich verhindern.

Antworten (2)

Ich glaube nicht, dass es Schriftarten gibt , von denen man vernünftigerweise erwarten kann, dass sie auf jedem System zu finden sind. Warum fügen Sie nicht einfach Ihre eigene Schriftart hinzu, die diese drei Glyphen definiert? Oder verwenden Sie einfach die untenstehende. Das Zeichnen in FontForge dauerte nur wenige Minuten.

@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;
}

Hier kannst du es ausprobieren: https://jsfiddle.net/867xnw4d/

So sieht es aus:
0,5: ◐○○○○ // 2,5: ●●◐○○ // 4,5: ●●●●◐

Alternativ gibt es icomoon.io , was den Vorgang etwas vereinfacht. Hier ist eine kleine / etwas unnötige Komplettlösung: graphicdesign.stackexchange.com/a/109499/2332
Gute Antwort. Einige Referenzen: data uri's (rfc2397) , data uri's (mozilla) , css font reference
Anstatt eine benutzerdefinierte Schriftart zu erstellen, können Sie auch die gewünschten Glyphen aus einer Google-Schriftart auswählen, die sie unterstützt (mit text=●◐○), dann die entsprechende woff2-Datei herunterladen und diese verwenden, um die base64-codierte Daten-URL mit Hilfe dieses Ausschnitts zu erhalten .

Während dies gemäß Ihrer Frage keine Unicode-Zeichen verwendet, können Sie auch CSS wie folgt verwenden:

<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;}

Dies kann in einigen Fällen nützlich sein. Passen Sie sich Ihren Bedürfnissen an.

Fallback-Webfonts für Unicode-Kreise (●◐○)
AntwortenHierDatenschutz-Bestimmungen1y, 0v