高度不均匀。文字上面的空间比下面的大

2018-06-27 20:40:12

我遇到了诸如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;
}

正如你所看到的，普通的serif字体是在div中对齐垂直中心的。但是Josefin Sans不是，每个字母上面的空间都比下面的要多。

有没有什么办法解决这一问题？有什么方法可以用CSS或Javascript来改变上面的高度，并在字体下面？如果你尝试行高，你会发现它不能解决问题。

编辑：很多建议似乎是只能解决这种字体大小，正是这种字体等等的quickfixes。我需要一个可以处理不同字体和大小的解决方案，因为这种情况下的内容是由用户生成的，所以我无法控制他们将使用的大小或字体。

所以如果谈论伪代码，我会寻找的解决方案是“font-vertical-align：middle”或类似的东西。但也许解决这个问题的唯一方法是通过做像素特定的丑陋修补程序。

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

但是，您可以使用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 */
}

工作演示 。

尝试这个，

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

演示

字体不垂直对齐的原因是由于字体类型（某些字体类型的印刷线可能会偏移到大多数常规字体）

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

链接地址: http://www.djcxy.com/p/77867.html

上一篇: height is uneven. Larger space above text than under

下一篇: E" not found in PATH

高度不均匀。 文字上面的空间比下面的大

高度不均匀。文字上面的空间比下面的大