![如何用css设置网页字体[多图]](/aiimages/%E5%A6%82%E4%BD%95%E7%94%A8css%E8%AE%BE%E7%BD%AE%E7%BD%91%E9%A1%B5%E5%AD%97%E4%BD%93%5B%E5%A4%9A%E5%9B%BE%5D.png)
1、scale(x,y)对元素进行缩放X表示水平方向缩放的倍数|Y表示垂直方向的缩放倍数Y是一个可选参数，没有设置的话，则表示X，Y两个方向的缩放倍数是一样的。并以X为准。transform:scale(2,2.5)
2、scaleX()元素只在X轴（水平方向）缩放元素。默认值是1，基点一样在元素的中心位置。可以通过transform-origin来改变基点transform:scaleX(2)
3、scaleY()元素只在Y轴（垂直方向）缩放元素。基点一样在元素的中心位置。可以通过transform-origin来改变基点。transform:scaleY(2)
最后我们看看兼容性写法：
代码如下:
.test{
-moz-transform:scale(2,2)
-webkit-transform:scale(2,2)
-o-transform:scale(2,2)
background:url(img/i.png)no-repeat
width:198px
height:133px
}
一、scale()方法
缩放，指的是“缩小”和“放大”。在CSS3中，我们可以使用scale()方法来将元素根据中心原点进行缩放。
跟translate()方法一样，缩放scale()方法也有3种情况：
（1）scaleX(x)：元素仅水平方向缩放（X轴缩放）；
（2）scaleY(y)：元素仅垂直方向缩放（Y轴缩放）；
（3）scale(x,y)：元素水平方向和垂直方向同时缩放（X轴和Y轴同时缩放）；
scale有2个参数。
一、zoom几年前，zoom还只是IE浏览器自己私有的玩具，但是，现在，除了FireFox浏览器，其他，尤其Chrome和移动端浏览器已经很好支持zoom属性了
zoom的字面意思是“变焦”，摄影的时候常用到的一个概念。对于web上的zoom效果，你也可以按照此概念理解。可以改变页面上元素的尺寸，属于真实尺寸。
在旧的web时代。*zoom: 1可以给IE6/IE7浏览器增加haslayout, 用来清除浮动，修复一些布局上的疑难杂症等。
其支持的值类型有：
百分比值：zoom:50%，表示缩小到原来的一半。
数值：zoom:0.5，表示缩小到原来的一半。
normal关键字：zoom:normal等同于zoom:1.
注意，虽然Chrome/Safari浏览器支持了zoom属性，但是，其实zoom并不是标准属性。
二、而transform下的scale就不一样了，是明明确确写入规范的。从IE9+到其他现代浏览器都支持。语法为：transform: scale(<x>[<y>]). 同时有scaleX, scaleY专门的x, y方向的控制。
和zoom不同，scale并不支持百分比值和normal关键字，只能是数值。而且，还能是负数，没错，负数。而zoom不能是负值！
三、区别先总结的差异：
浏览器兼容性。IE全族/Chrome/Safari和IE9+现代浏览器的差别。
控制缩放的值不一样。zoom更全面，但是不能是负数，只能等比例控制；而scale虽然只能是数值，但是能负数，可以只控制1个维度。
然而，更深层次的差异才是更重要的。
zoom的缩放是相对于左上角的；而scale默认是居中缩放；
zoom的缩放改变了元素占据的空间大小；而scale的缩放占据的原始尺寸不变，页面布局不会发生变化；
zoom和scale对元素的渲染计算方法可能有差异。
