设置相同font-size与line-height，行高仍受font-family影响如何解决？

你遇到的问题根源在于不同字体的内置度量参数（如字符上升高度、下降高度）存在差异——即使设置了相同的font-size和line-height，浏览器会根据字体自身的度量来分配行框内的空间，导致视觉上行高出现明显差异。

以下是几种可靠的解决方法：

方法1：使用font-size-adjust统一视觉行高 #

font-size-adjust属性可以强制不同字体保持相同的x-height（小写字母x的高度），让行高的视觉效果一致。通常以sans-serif字体的x-height比例为基准（约0.58），设置后浏览器会自动调整其他字体的有效字号，确保视觉行高统一：

div {
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  width: 40%;
  background: gray;
  vertical-align: top;
  font-size-adjust: 0.58;
}

方法2：用line-height: 1+内边距手动控制行高 #

如果需要兼容旧浏览器，或者更直接地规避字体度量的影响，可以将line-height设为无单位的1（让行高严格等于字号），再通过上下内边距来调整整体行间距：

div {
  font-size: 16px;
  line-height: 1; /* 行高与字号完全一致，消除字体自带行距差异 */
  padding: 0; /* 可按需设置上下内边距，比如padding: 2px 0; 让整体行高变为20px */
  display: inline-block;
  width: 40%;
  background: gray;
  vertical-align: top;
}

这种方法完全由内边距控制行高，不受字体特性影响。

方法3：固定行框高度+垂直对齐 #

如果需要严格固定行高，可设置height等于目标行高，配合vertical-align: middle让文字在固定行框内居中，同时用overflow: hidden避免字体超出部分破坏布局：

div {
  font-size: 16px;
  line-height: 16px;
  height: 16px; /* 固定行框高度 */
  display: inline-block;
  width: 40%;
  background: gray;
  vertical-align: middle;
  overflow: hidden;
}

注意：这种方法可能会截断部分带装饰的字体（如带上下延伸的手写体），需要根据实际使用的字体调整。

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