这个问题的核心原因在于不同字体的内置字体度量（font metrics）差异，结合浏览器对行高的默认计算逻辑导致的，具体拆解如下：

• 字体自带的行高属性差异
  每一款字体在设计时都有自己的「字体度量数据」，包括字符基线到顶部的高度（ascent）、基线到底部的高度（descent），以及专门的「行间隙（line gap）」。有些字体（比如你用的Arial）的line gap或者整体ascent+descent+line gap的总和比Lucida Sans Unicode更大。当文本换行时，这些内置的间隙会被浏览器渲染出来，尤其是当字体尺寸很大（比如100px）时，这种差异会被放大成肉眼可见的行间隙。

• 浏览器默认行高的计算逻辑
  当你没有给span显式设置line-height时，浏览器会使用默认值normal。这个值并不是固定的数字，而是由当前字体的度量数据决定的，通常在1.0~1.2的区间浮动。不同字体对应的normal行高实际像素值完全不同——Arial对应的默认行高可能比Lucida Sans Unicode更高，所以换行后的行与行之间就出现了明显的空隙。

• inline元素的渲染特性
  span是inline元素，文本换行后会生成多个inline box。这些box的垂直间距由line-height和字体度量共同控制，没有显式行高时，字体本身的度量就成为了决定行间距的关键因素。

验证/解决方法 #

如果要消除这种差异，只需要给span显式设置固定的line-height值即可，比如：

span {
  /* 其他样式不变 */
  line-height: 1; /* 或者设置具体像素值，比如100px */
}

这样就能强制统一行高，不管用什么字体，行间隙都会消失。

内容的提问来源于stack exchange，提问作者hllktlhndd