0%

CSS height、line-height、font-size 关系

发表于 更新于 Valine：

font-size

下面这段代码 font-size 相同，不过 font-family 不一样：

1
2
3
4
5
<p>
    <span class="a">Ba</span>
    <span class="b">Ba</span>
    <span class="c">Ba</span>
</p>
1
2
3
4
p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

由此得到的 span 元素的实际高度各不相同：

  • 字体度量

字体度量包括 ascender、descender、capital height、x-height 等。

示意如图所示：

把 Catamaran 字体放到 FontForge 中，分析它的字体度量：

  • content-area

从上图可见 Catamaran 字体的 ascender 是 1100，descender 是 540，line gap 是 0。

字体的实际渲染高度 = ascender + descender + line gap

所以 Catamaran 的实际渲染高度是 1100 + 540 + 0 = 1640px，如图所示：

而一个字体的实际渲染高度又被称为 content-area。

line-height

line-height 和 content-area 的关系可以用下面的图说明：

line-height 和 content-area 高度的差异叫做 leading。leading 的一半会被加到 content-area 顶部，另一半会被加到底部。因此 content-area 总是处于 line-height 的中间。

当然 leading 的值可以是正的，也可以为负或零。leading 为负的效果如图所示：

height

height 决定了一个标签实际展示的高度（可以认为 height 完全决定了 background-color 的展示区域）。

当 height 大于 line-height 时，会出现下图的效果：

height 小于 line-height 时，会出现下图的效果：

参考文档