css3 chrome 字体小于12px的解决方案

chrome 浏览器默认的最小文字大小是 12 像素,如果用户不修改这个设置,那么你设置的文本小于 12 像素是无效的。

包括用 chrome 模拟手机开发 H5 页面的时候,小于 12 像素会被直接设置为 12px,而手机上浏览器允许小于 12 像素。

修改 chrome 设置

右上角 –> 设置 –> 外观 –> 自定义字体 –> 最小字号

CSS 处理方法

网上一直有流传一个简单处理办法:

1
2
3
body {
-webkit-text-size-adjust:none;
}

注:不知道从哪个版本开始,这个方法已经无效了!

解决办法

要处理这问题,必须借助 css 的 transform 属性来做。MDN

1
2
3
4
5
6
.font {
font-size: 12px;
/* 由于 Firefox 也会识别 -webkit- 前缀,所以将文字统一处理, 10 / 12 表示当前文本显示为 10 像素 */
-webkit-transform: scale(calc(10 / 12));
transform-origin: left center;
}

效果:

测试文本

本文由 linx(544819896@qq.com) 创作,采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用,但需署名作者且注明文章出处。本文链接为: https://blog.jijian.link/2020-03-19/css3-chrome-font-size/

如果您觉得文章不错,可以点击文章中的广告支持一下!