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

我已经将代码缩减到最低限度：似乎将字体大小和行高属性设置为px值会导致实际使用不同的值。
在本例中，div设置为77px高度，字体大小和行高也设置为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的实际高度和宽度将根据视区大小而改变，因此我事先没有固定的数字。
更新：要说清楚，这里的具体问题是，我找不到在特定像素高度渲染glyph的方法。某些字体将采用字体大小（即使指定为px值）并将其视为建议，并使用一堆额外的填充和内容呈现它们的字符，因此在我的示例中，将verdana glyph设置为字体大小77px实际上占用了85个像素的高度-这只是在safari中，我还没有弄清楚其他浏览器和平台会渲染它。
我需要的，是找出如何计算出一个字形将被渲染到的真实高度，或者找出如何使它在我指定的确切高度渲染。
到目前为止，我所能做的就是将字体大小减少一个“小数量”，并希望这将适用于所有大小的字体，而目前这个数量似乎是实际像素高度的0.75，我想渲染它。对于行高也是如此，减少太多会使div中的glyph太高，重叠顶部而不是底部。
是否无法指定字形的实际像素高度？或者没有办法询问字体并找出它将要使用的实际值？

最佳答案

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

* {
  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>