数字和文字之间的Inconsisent差距

Question

我得到了奇怪的间距问题。有数字和每个文本并行。在1,4,7和'每个'文本之间有不同的间距。我们如何解决这个问题或者它不能被修复。我没有使用任何间距和额外的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

字符1（和图7有时）通常会在大多数字体被间隔开。如果你想要统一间距，你应该考虑使用等宽字体。

您可以对代码进行的另一项改进是删除标记之间的空格。

请检查下面的代码：

@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。