谷歌浏览器Chrome是Webkit的内核，之前，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。
CSS代码定义如下：
-webkit-text-size-adjust:none;
但是，在现在最新版的谷歌里，已经不在支持这个属性啦。
所以css又出了新的属性：transform:scale()
我是一个小于12PX的字体
定义一个样式
body,p{ margin:0; padding:0}
p{font-size:10px;}
放在浏览器预览，会发现最新版谷歌已经不在支持，还是12像素
所以我们就要用到了，下面属性
-webkit-transform:scale(0.8); //0.8位缩放倍数，具体自己根据实际需求修改
修改后样式为
body,p{ margin:0; padding:0}
p{font-size:10px;-webkit-transform:scale(0.8);}
但是，这个属性会把整个p的属性都缩放。
如果有背景、边框、都会被缩小！
所以我们需要修改结构为
我是一个小于12PX的字体
定义样式为
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8);}
改了之后，还是不可以的。
原因 -webkit-transform:scale(0.8); 只能缩放可以定义宽高的元素，而span是行内元素，不可以
所以我们修改为
body,p{ margin:0; padding:0}
p{font-size:10px;}
span{-webkit-transform:scale(0.8); display:inline-block}
为什么定义 display:inline-block 而不是 display:block？
转为block就独占一行啦！如果我后面还有其他元素就会受到影响，所以需要转换为 inline-block
现在放到谷歌浏览器里，就会发现支持字体变小啦
但是还会存在一定的边距，貌似margin或者padding的间距，这就是缩放存在问题，原来的位置还占有12px字体的大小。
所以，还要对应修改margin了，定义为负的即可.
扫描二维码手机查看该文章
文章引用：https://www.qinghuahulian.com/news/webzhishi/1154.html
在线咨询
电话咨询
