字体在chrome浏览器下最小只能设置成12px的解决办法

Chrome谷歌浏览器下不支持css字体小于12px。
我们先来看个效果图（chrome下）：

给你看个栗子.png

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

那么网上有一个方法就是给当前样式添加Chrome私有属性：-webkit-text-size-adjust:none;
可是我进行验证后发现并无效果。后来查资料了解到在Chrome 27之后就取消了对这个属性的支持，那么我们应该如何设置Chrome下的字体呢？

可以利用css3的缩放属性：transform:scale()

.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
这样在元素上加上这个属性就OK了，但是只这样写可不会兼容IE、FF哦，所以再给一个兼容性写法：

.small-font{
font-size: 12px;
-webkit-transform: scale(0.5);
}
.smallsize-font{
font-size: 6px;
}

PS:有小伙伴让用rem解决，我在这里解释一下哈，em、rem是一种相对单位，根据根元素的大小计算出来，目的是浏览器的字体大小变化时，页面布局及字体大小能跟着自适应。也就是说反应到浏览器要渲染是还是xx px，那Chrome浏览器本身是渲染不了12px以下的字体的，所以这个方法是不可行的，rem虽好，但不对这个症。

给我点赞的都是小可爱 ^_

作者：Wendy曹
链接：https://www.jianshu.com/p/5991523a98f9
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。