css怎么让Chrome支持小于12px 的文字

Posted 2020-06-25 smile轉角

谷歌浏览器Chrome是Webkit的内核，有一个 -webkit-text-size-adjust 的私有 CSS 属性，通过它即可实现字体大小不随终端设备或浏览器影响。
CSS样式定义如下：
-webkit-text-size-adjust:none;

但是在最新版的谷歌里。已经不在支持这个属性啦，需要通过css3的transform来解决，方法如下：

 

css部分	html布局
body,p{ margin:0; padding:0;} p{font-size:10px;} span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block;}	<p><span id="span1">我是一个小于12PX的字体</span></p>

解释：

1.{webkit-transform:scale(0.8);  display:inline-block}  //0.8位缩放倍数，具体自己根据实际需求修改，只能缩放可以定义宽高的元素，而span是行内元素，

为什么定义 display:inline-block而不是 display:block？转为block就独占一行啦，所以转换为inline-block

2.{-o-transform:scale(1);}opera现在最新版也是webkit内核，新版本的opera，本来就是10px的字体了。

 

 

 

 

 

作者：smile.轉角

QQ：493177502