数字和文本之间的不一致差距

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

尽管使用等宽字体是一种很好的解决方法，但如果它具有正确的OpenType功能，您可以使用原始字体解决此问题。

数字占据的空间差异是由数字的宽度引起的（与其他答案中建议的字距或字母间距相反）。宽度是成比例的 - 1比4窄。

但是字体也可以提供表格数字，其中每个数字的宽度相等：

您可以使用font-feature-settings: 'tnum';在CSS中启用此功能。或者，要使用其他OpenType功能并处理浏览器不一致问题，请参阅Utility OpenType。

Answer 2

这是字体的字母间距问题。您应该使用monospace字体为所有字符实现相同的间距。

请尝试以下代码段。

＆＃13;

＆＃13;

.bigger {
  font-size: 40px;
}

p {
  font-family: monospace;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

字符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>