问题
This article (Deep dive CSS: font metrics, line-height and vertical-align - Vincent De Oliveira) says we can determine a font type’s 'real' px size by adding its ascender and descender and comparing this value with its em-square (UPM). For instance, in the example it gives, a font-type with 1100 ascender and 540 descender (its UPM is 1000) means when font-size is set to 100px it's actually 164px.
Don’t you also need to add its x-height?
回答1:
Don’t you also need to add it’s x-height?
No, in the article you can read that:
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.
x-height is one of metrics that we can use but it's already included in the sum of ascender + descender
Then you can read:
We can also predict that capital letters are 68px high (680 units) and lower case letters (x-height) are 49px high (485 units). As a result, 1ex = 49px.
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
So the content area is the sum of ascender and descender (110px + 54px) and the x-height is the size of lowercase letters which is only 49px and already included in the content area
来源:https://stackoverflow.com/questions/61839926/how-can-i-calculate-the-size-of-font-when-using-different-font-types