日志样式

浏览器字体大小如何利用CSS设置解决

谷歌阅读器Chrome是Webkit的内核,之前,有一个 -webkit-text-size-adjust 的私有 CSS 属性,

经过它即可完成字体大小不随终端设备或阅读器影响。
 
CSS代码定义如下:
 
-webkit-text-size-adjust:none;
 
但是,在往常最新版的谷歌里,曾经不在支持这个属性啦。
 
所以css又出了新的属性:transform:scale()
 

我是一个小于12PX的字体  定义一个款式

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的属性都缩放。
 
假定有背景、边框、都会被减少!

青岛网站建设,青岛做网站,青岛网站开发,青岛响应式网站
 
所以我们需求修正构造为

我是一个小于12PX的字体

定义款式为
 
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了,定义为负的即可。

若有其他网站建设问题,可以拨打13021772707为您答疑解惑哦。

优尔品牌全案策划 V视觉创意设计机构 商业摄影-吉の影像 青岛美商印务印刷 餐饮品牌盈利密码 优尔教育营销策划 优尔工业营销策划
其他业务板块