How can I calculate the size of font when using different font-types?

99封情书 提交于 2021-02-05 07:49:08

问题


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

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!