扬州网络公司是怎么用css解决常用浏览器字体大小12px的问题
发表时间：2020-04-08 09:32:54网站建设中有非常多的小方法可以让建站更轻松，谷歌浏览器Chrome是Webkit的内核，之前，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。
-webkit-text-size-adjust:none;
但是，在现在最新版的谷歌里，已经不在支持这个属性啦。
所以css又出了新的属性：transform:scale（）
<body><p>我是一个小于12PX的字体</p></body>
定义一个样式
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的属性都缩放。
如果有背景、边框、都会被缩小！
所以我们需要修改结构为
<p><span>我是一个小于12PX的字体</span></p>
定义样式为
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了，定义为负的即可。