彻底理解 vertical-align 和 line-height

日期:2020-08-20

作者:科技微讯

https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

https://iamvdo.me/en/blog/css-houdini

https://iamvdo.me/en/blog/css-debugging-is-hard

https://css-tricks.com/practical-css-scroll-snapping/

It becomes obvious that setting line-height: 1 is a bad practice. I remind you that unitless values are font-size relative, not content-area relative, and dealing with a virtual-area smaller than the content-area is the origin of many of our problems.

terms

line-height: 1 是什么意思

line-height: normal 是什么意思

line-height: 20px 为什么比 font-size: 20px 更高

同样是 font-size: 100px, 不同的字体它显示的大小, 尤其是字体的高度, 是不相同的, 有些字体明显高一点, 有些明显低一点, 这和字体的设计有关.

设计一款字体时, 通常是在一个 1000 单位的方形区域内进行设计, 这个 1000 单位是相对于字体大小而定的, 对于 font-size: 100px, 一个单位就是 0.1px.