The solution of browser font less than 12px

1. Zoom through transform: scale()

<div class="box text1">The font size is 12px</div>
<! -- inside before adding the span tag, because transform:scale scales the width and height of the outer div -->
<div class="box text2">
    <span> The font size is 8px</span> 
</div>
Copy code
.box{
    width: 200px;
    height:100px;
    margin-bottom: 10px; 
    border: 1px solid red ;
}
.text1{
    font-size: 12px;
}
.text2 span{
    display: inline-block;/*transform:scale()这This attribute scales only the elements whose width and height can be defined. */
    font-size: 16px;
    transform: scale(0.5) ;/* font-size: 16*0.5=8px  */
    transform-origin: left top;/* Adjustment of position*/
}