Question

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

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 */
}

<强> WORKING DEMO

Answer 2

字体未垂直对齐的原因是字体类型（某些字体类型的排版行可以偏移到大多数传统字体）

http://jsfiddle.net/denistsoi/28zx2/

我添加了以下css规则

.text {
padding-top: 8px;
}

的更新 的

http://jsfiddle.net/denistsoi/28zx2/3/

另一种方式是

的 HTML 的

<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; }

Answer 3

试试这个，

.text{
    font-family: 'Josefin Sans';
    font-size: 36px;
    background: #ff0000;
    margin-bottom: 10px;
    height:36px; // add height
    line-height:24px;// add line-height
}

Demo

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

3 个答案: