WEB制作者向け無料テーマ「Arkhe」をリリースしました

CSSで文字詰め(カーニング調節)して、文字間隔を等間隔にする

font-feature-settingsという神プロパティがある。

使用できる値は、

  • "normal"
  • "palt"
  • "pkna"
  • "pwid"

などがあり、それぞれに対応する文字の範囲が異なるらしいが、フォントによっても挙動が異なるようなのでとりあえず"palt"で良さそう。

.elem {
    font-feature-settings: "palt";
}

個人的にはこれだけだと少し詰まりすぎて窮屈に感じてしまうので、カーニングを調節しつつ余白をあけるため、letter-spacingとよく一緒に使ってる。

.elem {
    font-feature-settings: "palt";
    letter-spacing: 1px;
}

綴り覚えにくいけど「vs code」などではffsとかで候補に出してくれる。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

目次
WordPressテーマ SWELLWordPressテーマ SWELL