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

CSS 中的字号与行高

一、设计的字体

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

CSS 中的字号与行高

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

假设 将字体高度设置为1000个单位 (具体的数值根据设计的字体而定)
CSS 中的字号与行高
以上图为例:字体的真实高度 = (ascender - (-descender)) / 字体高度 * fontSize;

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

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

三、关于行高 line-height

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

行高: 行间的距离,上下对半分

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

相关文章:

  • 2022-01-07
  • 2022-12-23
  • 2022-12-23
  • 2021-05-26
  • 2021-10-09
  • 2021-08-24
猜你喜欢
  • 2021-05-05
  • 2022-12-23
  • 2021-08-12
  • 2021-10-11
  • 2021-07-22
  • 2022-12-23
  • 2021-06-07
相关资源
相似解决方案