Font messes up alignment of numbers

问题

I'm using the Raleway font, but this font doesn't align numbers properly with letters.

You can see this in this snippet:

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

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

Can I solve this easily? Or is this just a faulty font and should I chose another one?

回答1:

The Problem

This is part of the font itself and not something you can provide a quick fix for (unless you're dealing with very little text). If we look at Google Font's page for the Raleway font, we'll see that numbers have different alignment to letters:

If you don't want the numbers to be aligned like this, you're going to have to use a different font instead.

A Fix

You can fix this by wrapping the numbers you wish to change the alignment of in a separate element and adjusting their vertical-align separately, but this is probably going to be more effort than its worth. I've given an example of this below:

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

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

回答2:

You can simply change with the help of CSS add font-feature-settings: 'lnum' 1; to your css file

so your new css will be:

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

Check out this too http://clagnut.com/sandbox/css3/

回答3:

It depends on "the number case setting" feature of your font supports.

still you can do it by following this

Further reading UX stackexchange

回答4:

I created a version of Raleway with lining numerals as default to be used as The Definitive Solution for this problem. You can download the font files or just embed it into your HTML (using <link>) or CSS (using @import) with a single line of code, like you'd do with any other Google Font. Free, open source and available in all weights and styles:

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

回答5:

I know you've posted this question a long time ago, but take a look at this property:

.class, #id, tag, * {
  font-variant-numeric: lining-nums;
  -moz-font-feature-settings:"lnum" 1; 
  -moz-font-feature-settings:"lnum=1"; 
  -ms-font-feature-settings:"lnum" 1; 
  -o-font-feature-settings:"lnum" 1; 
  -webkit-font-feature-settings:"lnum" 1; 
  font-feature-settings:"lnum" 1;
}

It forces all the numerals to be correctly aligned, so you can just apply this property to * in CSS and any text containing numbers will be a lot more readable.

回答6:

2020 speaking

Depending on the font and the browser you can add

font-variant-numeric: lining-nums;

Source : https://css-tricks.com/almanac/properties/f/font-variant-numeric/

来源：https://stackoverflow.com/questions/31942294/font-messes-up-alignment-of-numbers