WEBTODESIGN

【CSS】数字をfont-feature-settingsで等幅にする

一覧表などで、数字の幅を一緒にしたいとき。
普通の設定だと、1が細くて8は太くて…縦がバラバラ。

全角にするのはなんかちゃう…
widthでエリアを決めても日付のお尻が揃ってなくてガタガタに見える…

font-feature-settingsでやりたいことが実現できました!

tnum

font-feature-settingsの値tnumを使えば、数字を等幅表示してくれます。

font-feature-settings: "tnum";

日付を囲んだクラスなどに当てるだけ。
一覧表に縦に並んだ日付が縦にぴしっ!

これを求めてましたよ〜🥹