多年青岛网站建设经验,专业青岛网站设计公司青岛网站制作公司关于我们 | 客户服务欢迎来到青岛网站建设公司青华互联!
年轻,更要脱颖而出
对于网站建设,我们有活力,有态度
我们的优势: 专业网络公司,网站设计师量身定制 配备阿里云主机,BGP多线,高速访问 保障网站数据稳定、安全 免费提供快速ICP备案 承诺24小时快速解决网站简单问题

利用CSS设置小于12px的文字 解决常用浏览器字体大小

更新时间:2019-07-23 10:04   已阅读: 次 |  作者:青华互联  来源:青岛网站建设
谷歌浏览器Chrome是Webkit的内核,之前,有一个 -webkit-text-size-adjust 的私有 CSS 属性,通过它即可实现字体大小不随终端设备或浏览器影响。
CSS代码定义如下:
 
-webkit-text-size-adjust:none;
但是,在现在最新版的谷歌里,已经不在支?#32456;?#20010;属性啦。
 
所以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了,定义为负的即可.

文章引用:http://www.azm2m.com/news/webzhishi/1154.html
青岛网站建设
电话咨询
0532-80812129
186-532-19163
青岛网站制作
青岛网站建设手机站
返回顶部
上海上港足球俱乐部官网
新疆时时开奖自由的百科 查询时时彩历史数据 金牛平台买彩票 每天更新白菜彩金网站 时时彩组三规律破解 安格斯 彩票计划软件吉林快三 竟采比分网 中国彩吧下载桌面 北京pk赛车官网登录 四川时时诈骗案例 店宝宝免费账号 pk10高手稳赚428000群 重重时时彩稳赚 21点棋牌游戏官网 红牛娱乐下载