数字とテキストの間の矛盾したギャップ

Question

私は奇妙な間隔の問題を抱えていました。数字と各テキストが並行しています。そして、1,4,7、および 'each'テキストの間には異なる間隔があります。どのようにしてこの問題を修正することができますか、修正することはできません。私はスペースや余分なCSSのプロパティを使用していない。

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 1

フォントの文字間隔の問題である：

以下のコードをご確認ください。すべての文字の間隔を同じにするには、monospaceフォントを使用する必要があります。

次のスニペットを試してください。

.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: monospace; 
 
}

<p> 
 
    <span class="bigger">81</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span> 
 
    <small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span> 
 
    <small>each</small> 
 
</p> <br>

Answer 2

文字（時には7）1は、通常、ほとんどのフォントで間隔をあけられます。一様な間隔が必要な場合は、モノスペースフォントの使用を検討する必要があります。

コードに追加できる改善点は、タグ間のスペースを削除することです。

@import url('https://fonts.googleapis.com/css?family=Spectral'); 
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Spectral'); 
 

 
.bigger { 
 
    font-size: 40px; 
 
} 
 

 
p { 
 
    font-family: 'Open Sans', sans-serif; 
 
}

<p> 
 
    <span class="bigger">81</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">84</span><small>each</small> 
 
</p> <br> 
 
<p> 
 
    <span class="bigger">87</span><small>each</small> 
 
</p> <br>

Answer 3

固定幅フォントを使用すると、素敵な回避策ですが、それは正しいOpenType機能を持っている場合、あなたはあなたの元のフォントでこれを解決することができます。

数字が占めるスペースの違いは、（他の回答で示唆されているように、カーニングまたは文字間隔とは対照的に）数字の幅に起因します。幅は比例している - 1は、4

よりも狭くなっている。しかし、フォントは、各桁が同じ幅である表の数字、提供することができます。

あなたがでこれを有効にすることができますがCSSはfont-feature-settings: 'tnum';です。または、他のOpenType機能を使用してブラウザの不一致を処理するには、Utility OpenTypeを参照してください。