字体缩小到10px

如何将字体缩小到10px

方案1 使用transform进行缩小

例子: /playground/css-practice/10px-font/demo1.html

注意:

• 行内元素使用transform: scale(0.833);会没有效果，需要先设置为块级元素
• 如果对整个块进行缩小，虽然缩小后视觉上变小，但实际占据的位置大小没变

所以我们的实现思路：

1. 使用2个div，单独调整内部的div 防止影响容器元素
2. transform: scale(0.833) 来调整font，如果有视觉不对齐的问题通过 transform-origin 来调整中心点位置
3. 行内元素需要转变为块级

    <style>
        .cartData {
            background-color: red;
            display: inline-block;
            height: 20px;
            min-width: 20px;
        }

        .num {
            font-size: 12px;
            transform: scale(0.833);
            /* 这个可以动态调整文字的偏移 */
            transform-origin: 80% -90%;
            display: inline-block;

        }
    </style>
    <div class="cartData">
        <span class="num">999+</span>
    </div>

多行文字

多行文字也是可以的，只需要给父元素设置宽度让子元素的内容进行换行,查看这个demo:

/playground/css-practice/10px-font/demo4.html

方案2 使用svg

例子: /playground/css-practice/10px-font/demo2.html

缺点:

• 只能单行
• 需要控制x y 的中心点

    <style>
        * {
            margin: 0;
        }

        svg {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        svg text {
            font-size: 10px;
        }
    </style>

    <svg>
        <text x="0" y="10">我是10px字体大小 hello world！</text>>
    </svg>

思考

transform 无论是scale或者translate 来调整元素实际占据文档的大小是不会变化的。所以，这也是为什么使用css3 transform来做动画比使用js+定位来调整动画要更好的原因，transform只会重绘 而定位产生了dom的移动影响了文档流会进行回流，回流重新布局更耗费性能。

参考文章

https://juejin.cn/post/7118029219698835470 如何实现字体小于 12px 以及边框 0.5 px？