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

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

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

那就是字体的字间距问题。您应该使用 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 3

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

数字所占 space 的差异是由数字的宽度引起的（与其他答案中建议的字距调整或字母间距相反）。宽度成正比——1比4窄。

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

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

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

Inconsisent gap between number and text

html

css

fonts

typography