删除字体中不需要的空间-CSS

Question

我在网站上显示文字时遇到了一个愚蠢的问题。 请查看附件图片。

我在本文的左侧画了红线，但是在“ T”和“ 1”之间有一个清晰的空格，当它变为“ 2”时，空格问题就解决了。 我尝试了不同的字体，但是仍然出现问题。

现在，这是win10屏幕锁定的图像

我正在使用这些字体

font-family: Arial, Helvetica, sans-serif;

现在，您可以看到“ 1”和“ F”之间没有缝隙。谁知道我该怎么解决？

Answer 1

您可能想看看CSS text-indent property。它有助于在新文本块的开头提供正或负的缩进。但是，如果您提供负缩进，那么它在1之类的窄数字上看起来不错，它将在5之类的宽数字上突出显示。

将text-indent与a monospace font结合使用可以解决您的问题。

Answer 2

不要依赖系统字体。
考虑使用网络字体。
您可以找到带有适当字形的图片：

body {background: #000; color: #fff; font: 300 2rem/1 'Barlow', sans-serif}

h1, p
{
  margin: 0;
  padding: 0;
  border-left: solid 2px red;
}

p {
  padding-left: 3px;
}

<link href="https://fonts.googleapis.com/css?family=Barlow:300" rel="stylesheet">

<h1>11:40</h1>
<p>Thursday, June 21</p>
<h1>01:40</h1>