CSSでカーニング

Created: 2019-01-04

CSSでもカーニングできることを知ったので使ってみたところ、とても良かったのでこれからも使えるようにメモ。

CSSプロパティ

font-feature-settingsを使い、値に"palt"を設定します。句読点、括弧、中黒等を字詰から除きたい場合は、"pkna"を設定しても良いです。また、文字同士の共通的な間隔についてはletter-spacingを使って調整します。

html {
    font-feature-settings: "palt";
    letter-spacing: .0234375rem;
}

カーニング適用前。

キスティス 「まずは【G.F.】をジャンクションさせて。そうすれば【アビリティ】をセットすることができるわ」

カーニング適用後。

キスティス 「まずは【G.F.】をジャンクションさせて。そうすれば【アビリティ】をセットすることができるわ」

参考

avatar

Written by yo1000 | YO!CHI KIKUCHI
Loves 🌱 Spring, 🦢 Pelikan fountain pen and 🦁 FINAL FANTASY VIII