1. 背景

Chrome中默认最小字号是12px，英文版无限制。

2. zoom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block;
        zoom: 0.8; //使用zoom缩小字体
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

zoom的兼容性不高

3. -webkit-transform:scale

针对Chrome浏览器，加webkit前缀，使用transform：scale进行缩放
scale属性只对可以定义宽高的元素生效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style type="text/css">
    .span1{
        font-size: 12px;
        display: inline-block; //内联块级元素
        -webkit-transform:scale(0.8);
    }
    .span2{
        display: inline-block;
        font-size: 12px;
    }
</style>
<body>
    <span class="span1">测试10px</span>
    <span class="span2">测试12px</span>
</body>

4. -webkit-text-size-adjust:none

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小
属性值：

  • percentage：字体显示的大小；
  • auto：默认，字体大小会根据设备/浏览器来自动调整
  • none：字体大小不会自动调整
    Chrome27之后，取消了该属性的支持。该属性只对英文、数字生效，对中文不生效。

5. 总结

zoom，非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排。
-webkit-transform:scale()大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化
-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后就取消了该属性的支持，并且只对英文、数字生效