css中需要更小的字体如何实现

我想有很度人都遇到过这种问题，因为浏览器对font-size的最小值有所限制，例如Chrome,当我取值为10以下时，没有任何变化，直到0时文字消失不见，负值时回到字体原本的样子，所以我整理了一下浏览器对取值的限制以及解决方法

我遇到的是更小字体的解决方法，所以以我为例

.span1{
    display: inline-block;
     37px;
    height: 12px;
    border: 1px solid #E58A85;
    color: #E58A85;
    font-size: xx-small;
}
<p>
        <span class="span1">用券减40

    　　 <span class="span2">JBL T120A立体式入耳式耳机手机音乐耳机 游戏耳机 耳机耳麦 带麦......</span>                                            
        </span>
        <span class="span3">￥128</span>


</p>        
    

当然，我们可以使用缩放来实现

.span1{
    display: block;
     37px;
    height: 12px;
    border: 1px solid #E58A85;
    color: #E58A85;
    transform: scale(0.5);
}