首页 > Web开发 > 详细

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

时间:2016-03-18 16:01:51      阅读:154      评论:0      收藏:0      [点我收藏+]


谷歌浏览器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

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

原文:http://www.cnblogs.com/websmile/p/5292377.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!