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*/
}