http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
相同的字体大小，不同的字体有 不同 默认行高
显示字体的流程：
- a font defines its em-square (or UPM, units per em)
- based on its relative units, metrics of the fonts are set (ascender, descender, capital height, x-height, etc.). Note that some values can bleed outside of the em-square.
- 将这个 em-square 缩放到设置的 font-size
- normal 行高 = ascender（1100） + descender（540）
- content-area
内联模式下，浏览器计算这一行中每个内联元素的高度，从而确定这一行的行高
行高不是基线之间的距离：
Inline replaced elements, inline-block and blocksified inline elements have a content-area equal to their height, or line-height
// content area 在 virtual-area 居中
This happens because browsers do their computation as if each line-box starts with a zero-width character, that the spec called a strut.
vertical-align: top 的效果：
根据字体特性书写 css：
p {
/* font metrics */
--font: Catamaran;
--capitalHeight: 0.68;
--descender: 0.54;
--ascender: 1.1;
--linegap: 0;
/* desired font-size for capital height */
--fontSize: 100;
/* apply font-family */
font-family: var(--font);
/* compute font-size to get capital height equal desired font-size */
--computedFontSize: (var(--fontSize) / var(--capitalHeight));
font-size: calc(var(--computedFontSize) * 1px);
}
然后可以计算想要的具体值
