直线高度是不均匀的.文本上方的空间比下面大
直线高度是不均匀的.文本上方的空间比下面大
提问于 2014-03-05 09:19:21
我对像Josefin这样的字体有问题，上面的空格和下面的文字是不均匀的。这使得不可能垂直对齐文本。
看看这个http://jsfiddle.net/G5aVK/。
<div class="text">
Hello World
</div>
<div class="text2">
Hello World
</div>CSS
.text{
font-family: 'Josefin Sans';
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}
.text2{
font-family: serif;
font-size: 36px;
background: #ff0000;
margin-bottom: 10px;
}如您所见，普通的衬线字体在div中是对齐的垂直中心。但是Josefin一张不是，它在每个字母上面比下面有更多的空间。
有办法解决这个问题吗？有没有办法用CSS或者Javascript来改变上面和字体下面的高度？如果您尝试线高度，您将看到它没有解决问题。
编辑:很多建议似乎都是快速修复的，它们只解决这个字体大小，这个字体等等。我需要一个可以在不同字体和大小上工作的解决方案，因为在这种情况下，内容是由用户生成的，所以我无法控制他们将使用的大小或字体。
所以如果说伪代码，我想找的解决方案是“字体垂直对齐:中间”之类的。但也许解决这个问题的唯一方法是做一些难看的像素修复。
Stack Overflow用户
发布于 2014-03-05 09:24:37
字体不垂直对齐的原因是字体类型(一些字体类型可以将其排版行与大多数常规字体相距)。
http://jsfiddle.net/denistsoi/28zx2/
我添加了以下css规则
.text {
padding-top: 8px;
}更新
http://jsfiddle.net/denistsoi/28zx2/3/
另一种方法是
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans' rel='stylesheet' type='text/css'>
<div class="text">
<p class="content">Hello World</p>
</div>
<div class="text2">
Hello World
</div>这样，您还可以调整垂直对齐与您的边距~
CSS
.text > .content {
display: inline-block;
vertical-align: middle;
margin: 2px 0 -2px 0;
} 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22193360
复制相关文章
相似问题
腾讯云开发者
