CSS 中的字号与行高

问题： 设置字号大小为 20px , 然而真实字体高度却不是20px， 为什么???

一、设计的字体

设计字体的三个参考线： 上线、基线、下线

如图所示： 字体大小 = 顶线(ascender) + 底线(descender)

假设 将字体高度设置为1000个单位 (具体的数值根据设计的字体而定)

以上图为例：字体的真实高度 = (ascender - (-descender)) / 字体高度 * fontSize;

二、为什么字体高度大于字体大小

一般来说设计师在设计字体时， (ascender - (-descender)) / 字体高度 的比例都不会是标准的1 : 1， 所以 一般来说字体高度会大于字体大小

三、关于行高 line-height

我们在写样式时，都喜欢给文字设置行高，但是行高到底是怎么计算得来的呢？

行高： 行间的距离，上下对半分

条件假设： font-size: 50px, line-height: 70px;
那么半行距就为: (70 - 50) / 2 = 10px，向上的距离是10px，向下的距离也是10px