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

【问题标题】：Inconsisent gap between number and text数字和文字之间的差距不一致
【发布时间】：2017-07-07 15:05:35
【问题描述】：

我遇到了奇怪的间距问题。有编号，各文平行。 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>

【问题讨论】：

您可以使用letter-spacing 来减少字母之间的间距
那些空间是kerning。
@Kumar，我的回答对你有用吗？

标签： html css fonts typography

【解决方案1】：

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

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

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

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

【讨论】：

如果它指出问题中的特定字体是否支持这一点，以及更一般地说，如何检查，这将更加有用。
@Caleb 好点。打开sansdoes，不知道是不是google托管的版本。在任何情况下，您都可以通过与您的字体供应商核对来找出答案，或者直接使用font-feature-settings: 'tnum' 进行测试。

【解决方案2】：

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

试试下面的 sn-p。

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

【讨论】：

我猜那些空格是kerning 不是字母间距
我不是说 css letter-spacing 兄弟。它是字体文件中定义的间距。由于他没有使用等宽字体，因此每个字符的间距会有所不同。这就是为什么我建议他使用等宽字体。你可以看到sn-p的安排是平等的。 @AbhishekPandey
我使用了术语letter spacing of the font，因为我不知道术语kerning。感谢您的任期。
现在你知道这个词了；）快乐编码
你不必使用不同的等宽字体——你可以用你的原始字体来解决它。看我的回答。

【解决方案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>

【讨论】：