经常与网页打交道的攻城师，应该都知道。谷歌不支持小于12px的字体。

网页解决方案很多。

比如。修改浏览器配置。修改浏览器语言。

但作为一个WEB，我们无法修改用户的浏览器。这时候就出现了

1
2
webkit的私有属性：
html{-webkit-text-size-adjust: none ;}

但是，在最新版的谷歌里。已经不在支持这个属性啦。所以。这个属性。。。。

已经和我们说再见啦~


CSS3有个新的属性transform

而我们用到的就是transform:scale()


书写一段代码

1
2
3
< body >
< p >我是一个小于12PX的字体</ p >
</ body >

定义样式

1
2
body,p{ margin : 0 ; padding : 0 }
p{ font-size : 10px ;}

放在浏览器预览。会发现最新版谷歌已经不在支持。还是12px

所以我们就用到了

1
-webkit-transform:scale( 0.8 );   // 0.8 位缩放倍数，具体自己根据实际需求修改

修改后样式为

1
2
body,p{ margin : 0 ; padding : 0 }
p{ font-size : 10px ;-webkit-transform:scale( 0.8 );}

但是，如果，这个属性会把真个p的属性都缩放。如果我有背景呢？我有边框呢？都会被缩小！

所以我们修改结构为

1
< p >< span >我是一个小于12PX的字体</ span ></ p >

定义样式为

1
2
3
body,p{ margin : 0 ; padding : 0 }
p{ font-size : 10px ;}
span{-webkit-transform:scale( 0.8 );}

但是你会惊讶发现，不可以。实际上，是以为-webkit-transform:scale(0.8);只能缩放可以定义宽高的元素，而span是行内元素，不可以

我们修改为

1
2
3
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了。定义为负的。。



其实还没结束~~~



你以为这样就结束了吗？

NO，我们还需要去兼容opera！！！

为什么？opera现在最新版也是webkit内核啦~~~苦逼的工程师呀~

但是新版本的opera呢？

本来就是10px的字体了。然后在缩放，不敢想象了！

所以我们要修改样式为

1
2
3
body,p{ margin : 0 ; padding : 0 }
p{ font-size : 10px ;}
span{-webkit-transform:scale( 0.8 );-o-transform:scale( 1 ); display :inline- block }

让opera的不缩放。


放心opera还是支持他的私有前缀的。



现在我们代码就是这样啦!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< title >无标题文档</ title >
< style >
body,p{ margin:0; padding:0}
p{font-size:8px;}
span{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
</ style >
</ head >
< body >
< p >< span >我是一个小于12PX的字体</ span ></ p >
</ body >
</ html >


为了方便，我们最好定义为一个类，方便我们每次调用


修改为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
< html >
< head >
< meta charset = "utf-8" >
< title >无标题文档</ title >
< style >
body,p{ margin:0; padding:0}
p{font-size:8px;}
.shrink{-webkit-transform:scale(0.8);-o-transform:scale(1); display:inline-block}
</ style >
</ head >
< body >
< p >< span class = "shrink" >我是一个小于12PX的字体</ span ></ p >
</ body >
</ html > 
.webkit {
	font-size: 9px;
	-webkit-transform: scale(0.75);}

12×0.75=9，对于其它浏览器来说，9px默认识别，仅需要对于webkit浏览器进行缩放。

font-size: 9px;
	-webkit-transform: scale(0.75);
	-o-transform: scale(1);