当前位置: 动力学知识库 > 问答 > 编程问答 >

CSS: Understanding and adjusting leading / line-height of fonts

问题描述:

A very similar question was asked here but the really answered sufficiently...

The CSS line-height property controls the amount of white space above the letters. Making it bigger/smaller spaces rows of text farther/closer together. But if you set the line height to the exact same value as the font-size, the text will still have white space above them.

So this DOESN'T quite work...

div { height: 80px; }

span { font-size : 80px; line-height : 80px; }

<div>

<span>Foo</span>

</div>

http://jsfiddle.net/s_d_p/yMHVs/

The degree to which the enclosed text actually matches the container height seems to differ from font to font.

So my question is two parts:

  1. What are we actually adjusting when we set line-height?

  2. Is there a way to remove it entirely so that letter fit precisely inside their container?

网友答案:

Note that the remaining/extra space is typically a symptom of the font being used, as designated by its designer.

Thus, the 80px includes the allocated white space above and/or below. Additional white space above is typically provided to allow for accented characters, which would otherwise require the letter itself to be compressed- producing an inconsistent typeface.

See here & here for further information.

Line height refers to the total height of the typeface, inclusive of any allocated whitespace.

网友答案:

i'm sure that space is reserved for some characters that need more space. like this one:

Fj╛

character "j" need more space that "F" and i'm sure again that there is other characters (like "╛") that needs some space in above and bottom. so font designer reserved this space for that characters.

jsFiddle

分享给朋友:
您可能感兴趣的文章:
随机阅读: