线高不均匀。文本上面的空间比下面的空间大 [英] line-height is uneven. Larger space above text than under

问题描述

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

I'm having issues with fonts such as Josefin Sans where the space above, and below the text is uneven. This makes it impossible to vertical align the text.

请看这个 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的不是，它在每个字母上面的空间比在下面还要多。

As you can see the normal serif font is aligned vertical center in the div. But the Josefin Sans one is not, it has more space above each letter than under.

有没有办法解决这个问题？是否有任何方法使用CSS或Javascript更改上方和字体下方的高度？如果你尝试行高，你会看到它没有解决问题。

Is there any way to fix this? Is there any way with CSS or maybe Javascript to change the height above, and below the font? If you try line-height you will see it does not fix the issue.

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

A lot of suggestions seem to be quickfixes that would only solve exactly this font size, exactly this font and so on. I would need a solution that would work over different fonts and sizes, because the content in this case is generated by the users so I can't control what size or font they will be using.

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

So if talking pseudo-code, a solution that I would look for would be "font-vertical-align: middle" or something like that. But maybe the only way to fix this is by doing ugly pixel-specific fixes.

推荐答案

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

That space belongs to the characters themselves; Which means you have to edit the font via a Font editor application to align the characters vertically in their code point.

但是，您可以使用 line-height 和 min-height 达到目标的属性：

However, you can play with line-height and min-height properties to achieve the goal:

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

< a href =http://jsfiddle.net/hashem/G5aVK/2/ =nofollow>工作演示 。

WORKING DEMO.

这篇关于线高不均匀。文本上面的空间比下面的空间大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！