Vertikal zentrierter Doppelpunkt für Zeit

Dieser Artikel behandelt den vertikal zentrierten Doppelpunkt in Apples Schriftart San Francisco.

Doppelpunkt vertikal ausrichten

Meine Webapp verwendet die Montserrat-Schriftart , die in CSS wie folgt angegeben ist:

@font-face {
    font-family: 'Montserrat-Light';
    src: url('fonts/Montserrat-Light.otf');
}

* {
    font-family: 'Montserrat-Light';
}

Ich habe Mühe, einen vertikal zentrierten Doppelpunkt zu bekommen, um eine Zeit anzuzeigen (z . B. 9:41).

Wie kann ich im Kontext einer Webapp einen vertikal zentrierten Doppelpunkt mit der Montserrat-Schriftart erstellen?

genau "wie" hängt von Ihrer Implementierung ab. Was dies genannt wird, ist eine Grundlinienverschiebung . Soweit ich sehen kann, ist dies eine Apple-Typ-Rendering-Funktion a la intelligente Anführungszeichen oder Brüche: Sie sucht nach { Doppelpunkt umgeben von Zahlen} und {macht Magie}. Wenn ich meine eigene rollen müsste und keine Möglichkeit hätte, die spezifische Höhe der Glyphe abzufragen, würde ich einfach die Grundlinienverschiebung für eine anständige Auswahl von Schriftgrößen der Schriftart, an der ich interessiert bin, manuell einstellen und dann sehen, ob ich könnte Leiten Sie eine geeignete Formel zur Verallgemeinerung her.
Wie Yorik sagte, wird das Wie vollständig von der Implementierung abhängen. Könnten Sie Ihre Frage mit weiteren Details dazu bearbeiten, wie Sie dies implementieren?
Ich habe die Frage aktualisiert, um zu erklären, dass meine Implementierung auf CSS und einer .otfSchriftartdatei basiert.
Die oben erwähnte (Magie) kann sehr wohl eine OpenType-Funktion sein, die für die Schriftart spezifisch ist. Wenn dies der Fall ist, gibt es keinen Grund anzunehmen, dass genau dasselbe Merkmal in einer völlig anderen Schriftart vorhanden ist. Da Minion Pro eine "Th"-Ligatur hat, ist es so, als ob alle Schriftarten eine haben. In diesem Fall benötigen Sie die einfache alte CSS-Trickery.
Es mag ein Opentype-Feature sein, aber es ist angeblich für Entwickler umschaltbar. Ich konnte keine Einzelheiten dazu finden, obwohl aus Benutzersicht die meisten dieser Funktionen Klassen sind. Wenn sie also "Positionsformen" nutzen und Sie möchten, dass die Grundlinie des Doppelpunkts verschoben wird, verlieren Sie dann die anderen Glyphen, die auf dieser Funktion beruhen? Forschergeister wollen es wissen!
Was haben Sie versucht, um diesen Effekt zu erzielen? Wir verlangen, dass Sie dies in die Frage aufnehmen

Antworten (2)

Erwägen:

<span class="hour">10</span><span class="minute">30</span>

Und die Stilrichtungen:

.hour, .minute {
font-size: 60px;
line-height: 80px;
background-color: #aaaaaa;
}

Und der Doppelpunkt wird mit einer Pseudo-Klasse hinzugefügt, verwendet EMs, um die Spitze um 10 % der Schriftgröße nach oben zu verschieben (1 EM = 100 %; .1 EM = 10 %).

.hour::after {
content: ":";
position: relative;
top: -.1em;
background-color: #dddddd;
}

Führen Sie für eine Annäherung an perfekt eine Reihe von Tests mit verschiedenen Schriftgrößen durch und prüfen Sie, ob Sie einen gut funktionierenden EM-Wert für die gewünschte Schriftart finden.

Es ist wahrscheinlich ratsam, dies für die Browserunterstützung zu testen, wenn Sie nicht mit einem einzelnen Renderziel arbeiten.

Anscheinend besteht die Antwort darin, (wie es Gnome tut) das RATIO-Unicode-Zeichen zu verwenden, da dies ein zentrierter Doppelpunkt ist. (Ich habe dies gelernt, da meine selbst erstellte Schriftart RATIO nicht unterstützte, aber das kann ich leicht beheben).

Vertikal zentrierter Doppelpunkt für Zeit
AntwortenHierDatenschutz-Bestimmungen1y, 0v