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

技巧 隔壁老李于 2023-08-17 07:32:52 最后编辑
文章总结
AI正在生成摘要

文章介绍了使用CSS的`font-feature-settings`属性中的`"tnum"`值,使数字等宽显示,避免数字变化时的抖动问题,并以手机系统字体MiSans为例说明了某些字体可能不等宽的问题。

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

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

CSS 文字等宽显示,避免数字变化时的抖动  第1张

<!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>


赞赏
取消
扫码支持 支付码
本文由 @隔壁老李 于 2022-10-04 发布在 野路子博客,如无特别说明,本博文章均为原创,转载请保留出处。
评论 (0)
访客
Top