Question

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

在此示例中，div的高度设置为77px，font-size和line-height也是如此。但是，实际字母是使用高度为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的实际高度和宽度将根据视口的大小而变化，因此我事先没有固定的数字。

更新：要清楚，这里的特定问题是我找不到在特定像素高度渲染字形的方法。某些字体会采用字体大小（即使将其指定为px值），也将其视为建议，并使用大量额外的填充和内容来呈现其字符，因此在我的示例中，将Verdana字形设置为font-大小77像素实际上占用了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>

Answer 2

这封信的顶部似乎有一个小的空白空间，可能就是您的问题。

也许您可以将字母放在span标签中，并提供以下属性以“纠正”此问题：

<div class=wrapper><span>Q</span></div>

然后：

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

span{
  position:absolute;
  top:-9px;
  left:8px;
}

https://codepen.io/anon/pen/MRbGpE

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

2 个答案: