如何修复从div元素底部扩展的文本

问题描述 投票:4回答:2

我已经将代码减少到最低限度:似乎将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的实际高度和宽度将根据视口大小而变化,因此我事先没有固定数字。

更新:要清楚,这里的具体问题是我找不到在特定像素高度渲染字形的方法。某些字体将采用font-size(即使指定为px值)并将其视为建议,并使用一堆额外的填充和内容渲染其角色,因此在我的示例中,将Verdana字形设置为font-尺寸77px实际上占用了85像素的高度 - 这只是在Safari中,我还没有弄清楚其他浏览器和平台将如何呈现它。

我需要的是找出如何计算字形将被渲染的真实高度,或找出如何使其在我指定的精确高度渲染。

到目前为止,我所能做的就是减少'少量'的字体大小,并希望它适用于各种尺寸的所有字体,目前这个数量似乎是我实际像素高度的0.75左右我想把它渲染一下。对于行高也是如此,增加的复杂性是减少太多使得div中的字形过高,重叠顶部而不是底部。

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

html css
2个回答
1
投票

文本元素包括顶部和底部的空间,构成行高。当您将线条高度设置为相同的字体大小时,它不会使顶部的空间变小,但只是意味着下一条线将向上移动得更近。为了删除顶部的空间,可以使线条高度小于字体大小。我玩了一下,并且在你的字体大小为77px的情况下得出了60px的行高。

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

0
投票

似乎这封信在顶部有一个小空的空间作为它的一部分,这可能就是你的问题。

也许你可以把这个字母放在一个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

热门问题
推荐问题
最新问题