文字詰め

使い方は簡単。CSSで次のプロパティーを設定するだけです。

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

このCSSプロパティーを使ったからといって全てのフォントで自動文字詰めができるわけではありません。利用できる条件は、OpenTypeフォントであることとプロポーショナルメトリクス情報が含まれていることの2点です。有名なフォントでいうと「ヒラギノ角ゴシック体」や「ヒラギノ明朝体」「游ゴシック体」「游明朝体」「Noto Sans CJK JP」で利用できます。

Windows環境で馴染みある「メイリオ」は日本語部分が等幅として設計されているため、プロポーショナルメトリクスの情報は含まれていません。そのため、「メイリオ」に対してはプロポーショナルメトリクスで字間が詰まりません。


ソ-ス:文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング - ICS MEDIA

メイリオ」はダメ。


関連:
HTMLで文字詰めするタイポグラフィー用JS | fladdict

HTMLでカーニング!手軽に文字詰めできる「FLAutoKerning.js」 | 株式会社LIG