线高不均匀.文本上面的空间比下面的空间大

Question

我遇到了诸如Josefin Sans等字体的问题,其中文本上方和下方的空间不均匀.这使得无法垂直对齐文本.

看看这个http://jsfiddle.net/G5aVK/.

HTML

<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 Sans不是,它在每个字母之上的空间比在下面还要多.

有没有什么办法解决这一问题？是否有任何方法使用CSS或Javascript更改上方和字体下方的高度？如果您尝试行高,您将看到它无法解决问题.

编辑:很多建议似乎是快速修正,只能解决这个字体大小,正是这个字体等等.我需要一个适用于不同字体和大小的解决方案,因为这种情况下的内容是由用户生成的,所以我无法控制他们将使用的大小或字体.

因此,如果谈论伪代码,我会寻找的解决方案将是"font-vertical-align:middle"或类似的东西.但也许解决这个问题的唯一方法就是做一些丑陋的像素特定修复.

Answer 1

这个空间属于角色本身；这意味着您必须通过字体编辑器应用程序编辑字体，以在代码点中垂直对齐字符。

但是，您可以使用line-height和min-height属性来实现目标：

.text {
    font-family: 'Josefin Sans';
    font-size: 36px;
    background: #ff0000;
    margin-bottom: 10px;

    line-height: .95em; /* Reduce the line height */
    min-height: 1.2em;  /* Set a min-height to the container */
}

工作演示。