【css】探究font-size、文本实际高度、line-height之间的关系

最新推荐文章于 2024-04-18 14:20:55 发布

汪小穆

最新推荐文章于 2024-04-18 14:20:55 发布

阅读量1.7w

点赞数 12

分类专栏： css 文章标签： font-size line-height font-size与line-height之前的关系字体大小与行高的关系

本文链接：https://blog.csdn.net/w390058785/article/details/96832707

版权

css 专栏收录该内容

19 篇文章

订阅专栏

前言：当我们给一个元素设置font-size之后，会发现该元素也会被加上一个line-height，而且该line-height的高度跟font-size并不一致，那么它们之间到底有什么关系呢？

一、基础表现

①、Chrome浏览器“微软雅黑”字体，字体大小18px;

<body>
    <style>
        div { margin-bottom:4px; font-size:18px background: #ccc; font-family:"微软雅黑"; }
    </style>
    <div>1234</div>
    <div>hello</div>
    <div>你好</div>
</body>

从中可以看出虽然数字、英文、中文字体表现出来实际的高度不一致，但是它们的行高都是一致的。都是24px; 相当于是font-size的大小上加了6px;

二、微软雅黑字体

按照上面的方法，我对12px -- 32px字体大小文本进行了统计

从数据统计可得出:

（还有个结论在数据中没体现，就是相同字体的文本，无论是数字、英文、中文，他们自动生成的行高都是相同的）

①、中文字体会相对规律些，实际高度与字体的差距都是1-2px之间，在60px的时候，已经差了有3px了，不过考虑到我们很少会用那么大的字体，我们就先把他忽略了。

②、很遗憾的是，字体与行高的差距并不一直都是6px，而是会随字体的变大而跟着变大，从数据中的表现来说，还算有些规律

③、最难把握的一点就是，数字、英文实际高度与字体大小的差距了，小字体还好，平均在4-6px之间，但是越往上，差距越来越大。这在开发时，设置大字体的数字、英文文本的时候，要特别注意。

④、还有个好消息是，“微软雅黑”字体在Chrome浏览器，Firefox浏览器，Opera浏览器统计出来的数据是一样的，但在Safari上有些自动生成的行高会多1px。

三、宋体

相较于“微软雅黑”字体，“宋体”表现出来的文本实际高度、字体与行高之前的差距会稳定很多。