height is uneven. Larger space above text than under

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.

Look at this 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;
}

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.

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.

EDIT: 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.

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.

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

WORKING DEMO .

---

Try this,

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

Demo

---

The Reason why the font isn't aligning vertically is due to the font type (some font types can have their typography lines offset to most conventional fonts)

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

I added the following css rule

.text {
padding-top: 8px;
}

Update

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

Another way is to

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>

This way you can also adjust the vertical alignment with your margins~

CSS

.text > .content {
    display: inline-block;
    vertical-align: middle;
    margin: 2px 0 -2px 0;
} 

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

上一篇: 在ColdFusion中防止数据库死锁的解决方案？

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