浏览器字体小于12px的解决方案

1.通过transform:scale()进行缩放

<div class="box text1">字体大小是12px</div>
<!--里面在添加span标签，因为transform:scale会缩放外层div的宽高  -->
<div class="box text2">
    <span>字体大小是8px</span> 
</div>

.box{
    width: 200px;
    height:100px;
    margin-bottom: 10px; 
    border: 1px solid red ;
}
.text1{
    font-size: 12px;
}
.text2 span{
    display: inline-block;/*transform:scale()这个属性只可以缩放可以定义宽高的元素， */
    font-size: 16px;
    transform: scale(0.5) ;/* font-size: 16*0.5=8px  */
    transform-origin: left top;/* 调整位置*/
}

2.效果图

字体大小是12px

字体大小是8px