1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 在谷歌浏览器下 使用CSS实现设置font-size小于12px无效的终极解决方案

在谷歌浏览器下 使用CSS实现设置font-size小于12px无效的终极解决方案

时间:2019-09-11 02:03:09

相关推荐

在谷歌浏览器下 使用CSS实现设置font-size小于12px无效的终极解决方案

近日做一个需求的时候,需要调整字号,结果在设置font-size:10px时,发现好像并没有什么变化。网站查找资料后才知道,谷歌浏览器最低支持12px的字号。

font-size 有一个最小值 12px(不同操作系统、不同语言可能限制不一样),低于 12px 的,一律按 12px 显示。理由是 Chrome 认为低于 12px 的中文对人类是不友好的。

使用-webkit-text-size-adjust属性(已无效)

如:div { -webkit-text-size-adjust:none;font-size:10px }

事实上,设置了这个属性后,并没有任何反应,无论是直接加在td上,还是加在body中。经查,在chrome29版本之前有效,之后的版本就不支持了。

使用transform来解决(缩放后会有点不居中)

如:transform:scale(0.8333)

.font10{font-size:12pxtransform-origin: 0 0;transform: scale(0.83)}

这样确实能在一定程度上实现需求,但是除了在缩小字体外,也缩小了盒子的大小,如果对盒子要求居中的话,看起来会有一些不居中。

使用rem的方式(有兼容问题)

如:设置 html{font-size:100px} span {font-size:0.1rem}

理论上是能够解决问题的,但是与我当前需求不匹配。第一,pc端移动端中rem可能存在兼容性问题。第二,当前项目实现方式,不好修改为rem的方式,需要改动内容较多。

使用zoom的方式

如:td{font-size:12px;zoom:0.83}

完美实现需求,且没有transform的问题,不会导致盒子缩放。且PC项目环境使用谷歌浏览器,可以支持zoom属性,移动端经测试也兼容。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。