これまで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: プロポーショナルかな
font-feature-settings.html
<style>
p {
font-family: 'YuGothic','Yu Gothic';
font-weight: 500;
text-align: justify;
text-justify: inter-ideograph;
}
.normal {
font-feature-settings: "normal";
}
.pwid {
font-feature-settings: "pwid";
}
.palt {
font-feature-settings: "palt";
}
.pkna {
font-feature-settings: "pkna";
}
</style>
<p class="normal">「綺麗」なフォントにしたい気持ち100%</p>
<p class="pwid">「綺麗」なフォントにしたい気持ち100%</p>
<p class="palt">「綺麗」なフォントにしたい気持ち100%</p>
<p class="pkna">「綺麗」なフォントにしたい気持ち100%</p>
結果
どうでしょうか。指定したそれぞれの値で括弧や、かな、英数字などの文字間隔に影響が出ているのがわかるかと思います。（影響出ていないやつもありますが）
結果「palt」の指定が一番文字としては詰まる形になりました。
今回指定している「palt」など値の意味についてぜひAdobeの公式のページを参考にしてみましょう。
font-feature-settingsが効かない場合
ベンダープレフィックスや対応ブラウザなどの問題でfont-feature-settingsが効かない場合があります。効かない場合の対処法について下記の記事でまとめていますので、font-feature-settingsが効かないという方は参考にしてみましょう。
