これまでWEBページ上で、グラフィックデザイナーがフォントにこだわりたい場合は、画像化して配置をするというのが主流でした。
画像化するともちろん手間がかかり、更にWEBページ全体の読み込み速度や容量も大きくなるため、速度的にあまり好ましい方法とは言えません。
実はCSSの「font-feature-settings」を使うことで簡単にCSSで字詰め・カーニングを行う事ができ、画像化しなくても文字間隔の調整が行なえます。
もちろん日本語でも可能ですので、ぜひ今回の記事を参考に「font-feature-settings」をマスターしましょう。
CSSの「font-feature-settings」でカーニングを行う
それでは早速「font-feature-settings」を使ってカーニングをしてみましょう。font-feature-settingsでは他のCSSと同様の書き方となりますが、font-feature-settingsで設定する値は主に
- normal: 規定の設定
- pwid: プロポーショナル字形
- palt: プロポーショナルメトリクス
- pkna: プロポーショナルかな
どうでしょうか。指定したそれぞれの値で括弧や、かな、英数字などの文字間隔に影響が出ているのがわかるかと思います。（影響出ていないやつもありますが）
結果「palt」の指定が一番文字としては詰まる形になりました。
今回指定している「palt」など値の意味についてぜひAdobeの公式のページを参考にしてみましょう。
font-feature-settingsが効かない場合
ベンダープレフィックスや対応ブラウザなどの問題でfont-feature-settingsが効かない場合があります。効かない場合の対処法について下記の記事でまとめていますので、font-feature-settingsが効かないという方は参考にしてみましょう。
