移动端小于12px的字体处理方法

今天在按设计稿坐页面时，遇到了下图的情况

        ​​​​​ 

 由于浏览器对字体最小为12px的限制，所以我查阅资料后尝试使用transform:scale来处理

代码如下：

        

            
            
学习
            

                
专家
            
        

 

        .doctor {
            position: absolute;
            right: (33/@vw);
            width: (17/@vw);
            height: (8/@vw);
            // line-height: (7/@vw);
            border-radius: (7/@vw);
            background-color: #ff6330;
            text-align: center;

            .font {
                position: relative;
                top: (-5/@vw);
                right: (6/@vw);
                width: (28/@vw);
                height: (14/@vw);
                font-size: (14/@vw);
                transform: scale(0.5);
                color: #fff;
            }
        }

【注意】

.font这个盒子的宽度一定要>=其中所含的字的个数*字体大小，否则文字会掉出来，变成竖着排列