CSS 文字等宽显示，避免数字变化时的抖动

风之吻网站开发 2024-11-15 542

CSS 文字等宽显示，避免数字变化时的抖动-第1张图片-风享汇

为数字设置font-feature-settings:"tnum"，可以让数字等宽显示，从而避免数字变化时的抖动。

比如某些手机的系统字体竟然不等宽！！！别看了，说的就是你，MiSans！！！

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        body {
            font-family: "MiSans Light"
        }
        .tnum {
            font-feature-settings: "tnum"
        }
    </style>
</head>

<body>
    <p>0000</p>
    <p>1111</p>
    <p class="tnum">0000</p>
    <p class="tnum">1111</p>
</body>

</html>

标签： css

本文地址： http://hui.fzwqq.com/post/238.html

文章来源：风之吻