使用不同的字体类型时，如何计算字体大小? [英] How can I calculate the size of font when using different font-types?

问题描述

本文( ^{https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align}

因此，内容区域是升序和降序之和(110px + 54px)，x高度是小写字母的大小，只有49px，并且已经包含在内容区域中

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?

解决方案

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

这篇关于使用不同的字体类型时，如何计算字体大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！