這個 CSS 屬性冷門但賊好用系列

來自公衆號：前端真好玩

對於數字來說，每個數字的寬度都不一定是相等的。比如說對於 1 和 2 來說，從 1 變成 2 的時候寬度一定會發生變化。如果此時周圍有元素的話，就會造成元素位置的偏移。

我們以分頁器爲例，當頁碼發生變化的時候，不等寬的數字會造成左側箭頭的位置偏移，大家可以從下圖中看到示例：

當遇到這種情況時，我們可以通過 font-variant-numeric[1] 屬性來實現數字的等寬。

font-variant-numeric CSS 屬性控制數字，分數和序號標記的替代字形的使用。tabular-nums 啓用表格數字顯示。使數字等寬，易於像表格那樣對齊。等同於 OpenType 特性 tnum。

同時這個屬性的兼容性也不錯：

除了這個屬性之外，我們也可以通過 font-feature-settings: "tnum" 來實現相同的功能。這個屬性的兼容性會更好點：

以上就是本文的全部內容，如果內容幫助到你的話可以點贊、轉發、留言！

引用鏈接

[1] font-variant-numeric: https://developer.mozilla.org/zh-CN/docs/Web/CSS/font-variant-numeric

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/gGPIbGQLgwQ568opl_J2Jg