Schrift vermasselt Ausrichtung von zahlen

Ich bin mit dem Raleway font, aber dieser font nicht, richten Sie zahlen ordnungsgemäß mit Buchstaben.

Können Sie sehen, dieses snippet:

CSS:

    h1 {
      font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
    }

HTML:

<link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>5 Comments</h1>

Kann ich dieses Problem lösen leicht? Oder ist das nur eine fehlerhafte schriftart und sollte ich wählte ein anderes?

  • Es ist nichts falsch mit der Schrift. Manche Schriften haben Ihre Xheight und baseline in numerische Zeichen, die nicht Buchstaben. dies ist im Zusammenhang mit der Gestaltung von Schrift-und es ist nicht ein Problem
  • Die schriftart " Standard-Eigenschaft auf rendert Ziffern, es ist nicht eine fehlerhafte schriftart. Für die gleiche Ausrichtung Sie können wählen Sie eine andere schriftart.
  • Müssen Sie verwenden eine andere schriftart.. dies ist, wie diese Schrift zeigt die zahlen typecast.com/preview/google/Raleway
  • okay, danke für die schnellen Antworten!
  • Sie können dieses Problem lösen, aber nicht leicht.. Sie sollten erwägen, mit einer anderen schriftart, wenn dieses Verhalten irritiert Sie..
  • Sie können wickeln Sie die Zahl und string in zwei separate <span> Elemente und aus der Benutzung vertical-align: middle; auf die span-halten Sie die Zeichenfolge, um es in Einklang. Das ist aber eher unschön und schwer zu pflegen.
  • Sind Sie sicher, wollen, um zu versuchen und bieten ein funktionierendes Beispiel?
  • Dies wird nicht funktionieren, cz der "White space" Um jedes Zeichen berechnet mit der X-Höhe der Figur.
  • Hier ist ein Beispiel für eine wahrscheinlich schlechte Idee: codepen.io/anon/pen/qdvvWo
  • Das funktioniert nicht wirklich, versuchen Sie, die Anzahl auf 1
  • sind Sie richtig. Das funktioniert nicht richtig - sollte getestet haben mehr Fälle. Vielen Dank für die headups,

InformationsquelleAutor sjbuysse | 2015-08-11
  1. 15

    Das Problem

    Dies ist ein Teil von der Schrift selbst und nicht etwas, das Sie können eine schnelle Lösung für (es sei denn, Sie beschäftigen sich mit sehr wenig text). Wenn wir uns anschauen,Google Font Seite für die Schrift Raleway, wir werden sehen, dass die zahlen unterschiedliche Ausrichtung der Buchstaben:

    Schrift vermasselt Ausrichtung von zahlen

    Wenn Sie nicht möchten, dass die zahlen ausgerichtet werden, wie diese, Sie gehen zu müssen, verwenden Sie eine andere schriftart statt.

    Ein Update

    Können Sie beheben dies, indem er die zahlen, die Sie möchten, ändern Sie die Ausrichtung in einem separaten element und Anpassung Ihrer vertical-align getrennt, aber das ist wahrscheinlich mehr Mühe als sein Wert. Ich habe ein Beispiel unten:

    CSS:

    h1 {
  font-family: Raleway;
  font-size: 2rem;
  border-bottom: 1px solid $text-color;
  border-top: 1px solid $text-color;
  padding: 2rem 0;
}

.raised {
  display: inline-block;
  vertical-align: 12%;
}

    HTML:

    <link href='http://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<h1>
  <span class="raised">5</span>
  Comments
</h1>

    • Vielen Dank für die sehr klare Antwort, ich bin gerade dabei zu schauen, für eine andere schriftart
    InformationsquelleAutor James Donnelly
  2. 9

    Können Sie einfach ändern mit Hilfe von CSS
    hinzufügen font-feature-settings: 'lnum' 1; zu Ihrer css-Datei

    also Ihr neues css:

    h1 {
        font-family: Raleway;
        font-size: 2rem;
        border-bottom: 1px solid $text-color;
        border-top: 1px solid $text-color;
        padding: 2rem 0;
        font-feature-settings: 'lnum' 1;
    }

    Überprüfen Sie heraus dieses zu http://clagnut.com/sandbox/css3/

    InformationsquelleAutor fluidbrush
  3. 1

    Kommt es darauf an, die Anzahl Fall die Einstellung" Funktion der schriftart unterstützt.

    immer noch, Sie können es tun, indem Sie die folgenden diese

    Weiter Lesen UX stackexchange

    InformationsquelleAutor 4dgaurav
  4. 1

    Ich eine version von Raleway mit Futter Ziffern als Standard verwendet werden als Die Endgültige Lösung für dieses problem. Laden Sie die schriftart-Dateien oder einfach nur binden Sie ihn in Ihre HTML-Seite (mit <link>) oder CSS (mit @import) mit einer einzigen code-Zeile, wie Sie tun würde, mit anderen Google Font. Kostenlos, open source und verfügbar in allen Gewichtsklassen und Stile:

    https://h-ibaldo.github.io/Raleway_Fixed_Numerals/

    InformationsquelleAutor Henrique Ibaldo
Schreibe einen Kommentar