移动端小于12px的字体处理方法_移动端最小字体大小-优快云博客

本文链接：https://blog.youkuaiyun.com/ioncannontic/article/details/131263123

文章探讨了在遇到浏览器对字体最小12px限制时，如何使用CSS的transform:scale属性来缩放字体，并通过调整transform-origin解决位置偏移问题。同时提到了-webkit-text-size-adjust属性作为另一种处理文本尺寸的方案，以及相关的浏览器兼容性考虑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

代码如下：

        <div class="icon">
            <span class="iconfont icon-a-xuexi3 icon-item"></span>
            <div>学习</div>
            <div class="doctor">
                <div class="font">专家</div>
            </div>
        </div>

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

设置字体小于12px显示

p {
    font-size: 12px;
    transform: scale(0.8);
}

缩放前

缩放后

会导致scale后的元素向后移

方案一

解决基点位置偏移的问题

transform-origin: 0 0;

将基点位置移动回原本的 X Y轴（0,0）的位置设置后

所以设置字体小于12像素并且位置不偏移的解决方法：

      p {
        font-size: 12px;
        transform: scale(0.8);
        transform-origin: 0 0;
      }

方案二

使用文本溢出算法

font-size:8px;
-webkit-text-size-adjust:none;

浏览器兼容情况