css - 对线条之间的间隙感到好奇

Question

下面有两个例子。唯一的区别是示例之间的字体系列，但第二个示例之间有行间距。为什么第二个例子中的线条之间有明显的间隙？

HTML:

<span>This is a long text. This is a long text. This is a long text. This is a long text.</span>

Example 1 in JSFiddle

CSS:

span{
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  font-size: 100px;
  background-color: red;
}

结果:

Example 2 in JSFiddle

CSS:

span{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100px;
  background-color: red;
}

结果:

Answer 1

出于某种原因，Arial 字体的行高为 1.16。您可以使用 line-height: 1.0; 或更高值的属性来更改它。