きっかけ
こちらの記事に大変お世話になっているのですが、個々の文字ごとの文字詰め部分の対処法について自分なりに補足していきます。
もし、HTMLのテキスト周りでデザイナーからこんなお願いをされたら...
↑めちゃめちゃ細かい部分まで書かれていて勉強になります。
font-feature-settingsはブラウザやフォントによっては使えない。。。
記事内に紹介されている文字詰めの対応方法でfont-feature-settingsが書かれているのですが、とても便利なプロパティではあるのですがブラウザやフォントによっては使えないことがあります。
オープンタイプフォント(.otf)であれば、プロポーショナルメトリクスが搭載されているのでfont-feature-settingsを使用することができます。
とはいえ、案件ごとに毎回otfを用意できないときもありますし、大変ですよね？？
「jQuery.Kerning.js」でクロスブラウザ対応する
そこで紹介したいのが「jQuery.Kerning.js」です。
プラグインはこちら
→http://karappo.github.io/jquery.kerning.js/
詳しい詳細はこちら
→[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js
ざっくり
・指定した要素内の設定された特定のテキストごとにspanタグで囲い、いい感じに文字詰めしてくれます。
・使用する際は文字ごとのカーニングが設定されたjsonを読み込む必要があります。デフォルトのjsonだと全角約物のカーニングのみが適用されるようになっています。ぜんぜんこれでも問題なく使えます！！
(※現在さまざまなフォントで利用できるよう自動的にデータを生成するツールを開発中とのことです。)
CSSでデフォルトでspan周りのスタイリングをしている際には注意！！
spanタグで文字が囲まれてしまうのでデフォルトで任意のスタイルをspanに当ててる場合は注意してくださいね！！