vertical-align和line-height的理解及实例

2024-04-02 18:41:50

字符实际大小和font-size的关系：
下图中不同字体font-size都是100px

测量了一下每个 span 的高度：Helvetica 115px，Gruppo 97px，Catamaran 164px。
所以，font-size 相同，font-family 不同，得到的 span 元素的高度也不同，为什么会这样呢，我们先了解下字体设计时，字符的结构：
一款字体会定义一个 em-square，设计时，宽高可以定位1000、 1024、2048px，显示到屏幕时上时，根据实际的font-size进行缩放，比如em-square为1000，font-size为100时，会把字体缩小到十分之一，但是字体的实际内容区域并不局限于em-square，它可以超出em-square，如下图所示：

下图是一个字体设计时，需要指定的各个部分，每个部分都要设置特定的值

图中ascender+ descender的高度就是字体中每个字符占据的高度（content-area）（实际显示时，是根据font-size大小来缩放的）（各个字符实际显示的高度可能不一样，如图中h和j，但是同一个字体，font-size相同的情况下，content-area都是一样大的）
图中ascender+ descender+line gap(leading)的高度，就是默认情况下，line-height的高度(line-height的默认值是normal)（实际显示时，是根据font-size大小来缩放的，且图中line gap(leading)部分的高度会等分为两半分别显示在content-area的上方和下方）
em-square只是字体设计中一个初始的框，字体的设计大小并不会局限在em-square里，所以em-square会小于或等于content-area，但是实际显示时，计算缩放比是根据em-square的大小和font-size的大小来计算的
我们可以在把一款字体放到 FontForge 中，分析它的字体度量：

可以看到在这款字体中，em-square是1000，content-area是 1100 + 540=1640，当我们把font-size设置为100时：
content-area = (100/1000)*(1100 + 540)=164
如果没有设置line gap，line-height默认值为164
我们还能看出大写字母的高度是 68px，小写字母的高度（x-height）是 49px。

结论:定义某个字体为100px时，其实际占据高度(content-area)大于或等于100px，默认情况下(line-height:normal)，所在行的line-height大于或等于content-area

码农公寓

相关文章