让Chrome支持小于12px 的文字方式有哪些?区别?

让Chrome支持小于12px 的文字方式有哪些?区别?


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

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

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

解释:

1.//0.8位缩放倍数,具体自己根据实际需求修改,只能缩放可以定义宽高的元素,而span是行内元素,

{webkit-transform:scale(0.8);  display:inline-block} 

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

{-o-transform:scale(1);}

opera现在最新版也是webkit内核,新版本的opera,本来就是10px的字体了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值