【CSS】CSS怎么设置小于12px的字体浏览器限制最小字体大小解决方法

最新推荐文章于 2024-12-17 22:29:05 发布

叶落无痕123

最新推荐文章于 2024-12-17 22:29:05 发布

阅读量9.9k

点赞数 3

分类专栏： css3 html

原文链接：https://blog.csdn.net/qq_43915356/article/details/109504037

版权

html 同时被 2 个专栏收录

15 篇文章

订阅专栏

css3

10 篇文章

订阅专栏

本文探讨了CSS中font-size属性的最小限制，特别是在不同设备上的表现差异。对于PC浏览器，通常限制最小字体大小为12px以确保良好的阅读体验，而手机端则没有此限制。文章还提供了一种通过transform:scale()属性来实现更小字体显示的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS的最小尺寸为1px，所以理论上可以将font-size设置为1px，但是实际上如果将font-size属性缩小到12px以下就没有效果了，这是因为浏览器限制了最小字体大小

这只是PC端的浏览器进行的限制，手机端默认没有开启该限制，还是可以直接通过CSS设置最小字体的

限制原因

这个是 Chrome 为了更好显示中文设计的，google公司认为，人眼最小最舒服的字体识别是12px，小于12px的字体将会引起不适
比如：
在这里插入图片描述

解决方法

使用transform: scale();属性缩放字体所在元素即可实现小字体显示

<span style="margin-top: 0;-webkit-transform-origin-x: 0;-webkit-transform: scale(0.90);">
2          <span style="color: #444;margin-top: 1px;">1、</span>
3          <span style="margin-top: 2px;">默认查询显示不达标的数据        
4          </span>
5 </span>