使浏览器支持12px字体的方法

chrome浏览器默认最小字号为12px,

原因是因为chrome团队认为汉字小于12就会增加识别难度

一.解决方法

常见的解决方法有:

1.zoom

2.-webkit-transform:scale()

3.-wekit-text-size-adjust:none

Zoom

Zoom字面的意思是变焦,可以改变页面上的元素尺寸,属于真实尺寸其支持的值类型有

//zoom:50&,//表示缩小到原来的一半
//zoom:0.5 //表示缩小到原来的一半



    测试
     测试

-webkit-transform:scale()

针对chrome浏览器,加webkit前缀,用transform:scale()这个属性进行放缩

注意的是,使用scale属性只对可以定义宽高的元素生效,所以,下面代码中将span元素转为行内块元素

实现代码如下:

    测试
    测试2

-webkit-text-size-adjust:none

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

属性值:

percentage:字体显示的大小;

auto:默认,字体会根据设备/浏览器来自动调整;

none;字体大小自动调整

html{
    -webkit-text-size-adjust:none;
}

 

这样设置之后会有一个问题，就是当你放大网页时，一般情况下字体也会随着变大，而设置了以上代码后，字体只会显示你当前设置的字体大小，不会随着网页放大而变大了

所以，我们不建议全局应用该属性，而是单独对某一属性使用

 

 

 

Zoom 非标属性，有兼容问题，缩放会改变了元素占据的空间大小，触发重排

-webkit-transform:scale() 大部分现代浏览器支持，并且对英文、数字、中文也能够生效，缩放不会改变了元素占据的空间大小，页面布局不会发生变化

-webkit-text-size-adjust对谷歌浏览器有版本要求，在27之后，就取消了该属性的支持，并且只对英文、数字生效