主页 / coding / 问题 / 79496503
Accepted
finefoot
Asked: 2025-03-10 03:49:07 +0800 CST

即使字体大小和行高都设置为相同的固定像素值，行高仍然取决于字体系列

  • 772

<style>
div {
font-size: 16px;
line-height: 16px;
display: inline-block;
width: 40%;
background: gray;
vertical-align: top;
}
</style>
<div style="font-family: monospace;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div style="font-family: sans-serif;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

和font-size都line-height设置为16px。但线条的实际高度仍然取决于 是font-family还是monospace。sans-serif我还需要设置什么才能获得统一的行高？

截屏

html

2 个回答

  1. Best Answer

    您的例子不太好，请看下面的例子，注意两者的高度完全相同。

    div {
  font-size: 16px;
  line-height: 16px;
  display: inline-block;
  width: 40%;
  background: gray;
  vertical-align: top;
  background: repeating-linear-gradient(180deg,gray 0 .8lh,red 0 1lh);
}
    <div style="font-family: monospace;">Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum</div>
<div style="font-family: sans-serif;">Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum <br>Lorem ipsum</div>

    • 2

  2. 的像素值line-height始终取决于字体。这是因为即使字体的大小（即字体大小）相同，字体的字符高度也可能不同。

    因此，您应该对line-height属性使用相对值（不带计量单位），例如：line-height: 1.3；

    • -3

相关问题