Chrome谷歌浏览器下不支持css字体小于12px的解决办法

Chrome谷歌浏览器下不支持css字体小于12px的解决办法

先来看下 ie、火狐、谷歌浏览器下各个字体显示情况

ie下：

火狐下：

谷歌下：

从上面的图可以很明显看出谷歌下 css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px;

 

解决方法：

1、手机端

.font{
    // 10px / 12px = 0.83
    transform: scale(0.83);
}

2、PC端

  避免不支持 CSS3 浏览器的情况，我们也可以通过降级处理，将字体变回12px；最后兼容 IE：*font-size:10px; 

 

.font{
    font-size : 12px;
 
    transform : scale(0.83,0.83) ;
    
    *font-size:10px;
 
}