html - 如何修复超出 div 元素底部的文本

Question

我已将代码缩减到最低限度:似乎将 font-size 和 line-height 属性设置为 px 值会导致在实践中使用不同的值。

在这个例子中，div 设置为 77px 高度，字体大小和行高也是如此。然而，实际的字母是使用 85 像素高度内的字形绘制的。

有什么想法可以让字母在 77 像素的高度内绘制吗？

.wrapper {
  background-color: rgb(80, 80, 80);
  color: red;
  width: 80px;
  height: 77px;
  line-height: 77px;
  font-size: 77px;
  font-family: Verdana;
}

<div class=wrapper>Q</div>

div 的实际高度和宽度会根据视口(viewport)大小而变化，所以我事先没有固定的数字。

更新:明确地说，这里的具体问题是我找不到在特定像素高度渲染字形的方法。某些字体会采用字体大小(即使指定为 px 值)并将其视为建议，并使用一堆额外的填充和东西来渲染它们的字符，所以在我这里的示例中，Verdana 字形设置为 font-大小 77px 实际上占用了 85 像素的高度 - 这只是在 Safari 中，我还没有弄清楚其他浏览器和平台将如何呈现它。

我需要的是找出如何计算出字形将呈现的真实高度，或者找出如何使其呈现在我指定的确切高度。

到目前为止，我所能做的就是将字体大小减少“少量”，并希望它适用于所有大小的所有字体，目前这个数量似乎是实际像素的 ~0.75我想渲染它的高度。行高也是如此，增加的复杂性是减少太多会使字形在 div 中过高，重叠顶部而不是底部。

没有办法指定字形的实际像素高度吗？或者无法查询字体并找出它将使用的实际值？

Answer 1

文本元素包括顶部和底部的空间，构成行高。当您将行高设置为与字体大小相同时，它不会使顶部的空间变小，而只是意味着下一行会向上移动更近。为了去除顶部的空间，您可以使行高小于字体大小。我试了一下，想出了一个 60px 的行高，而你的字体大小是 77px。

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  background-color: rgb(80, 80, 80);
  color: red;
  height: 77px;
  width: 80px;
  line-height: 60px;
  font-size: 77px;
  font-family: Verdana;
}

.wrapper2 {
  background-color: rgb(80, 80, 80);
  color: red;
  height: 77px;
  width: 80px;
  line-height: 0.8;
  font-size: 77px;
  font-family: Verdana;
}

.wrapper3 {
  background-color: rgb(80, 80, 80);
  color: red;
  height: 50px;
  width: 70px;
  line-height: 0.8;
  font-size: 50px;
  font-family: Verdana;
}

<div class="wrapper">Q</div>
<br />
<div class="wrapper2">Q</div>
<br />
<div class="wrapper3">Q</div>