200161204
最近話題となっているCSSプロパティ「font-feature-settings」で、文字詰めができるということで試してみました。

■参考にさせていただいたサイト
文字詰めできるCSSのfont-feature-settingsが凄い! 日本語フォントこそ指定したい自動カーニング

使用フォント : A-OTF 中ゴシックBBB Pr6N

■文字詰め設定なし

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

「もうよそう。勝手にするがいい。がりがりはこれぎりご免蒙るよ」

■文字詰め設定あり

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

「もうよそう。勝手にするがいい。がりがりはこれぎりご免蒙るよ」

使用フォント : A-OTF リュウミン Pr6N

■文字詰め設定なし

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

「もうよそう。勝手にするがいい。がりがりはこれぎりご免蒙るよ」

■文字詰め設定あり

吾輩は猫である。名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

「もうよそう。勝手にするがいい。がりがりはこれぎりご免蒙るよ」


使用するCSSプロパティ

OpenType フォントの先進的なタイポグラフィの機能を制御する「font-feature-settings」を使用。

normal: 初期値
palt : プロポーショナルメトリクス

その他の設定:Typekitヘルプ _ CSS での OpenType 機能の構文

■CSSの設定例
.kerning-palt { font-feature-settings : "palt"; }
■対応ブラウザ
caniuse

CSS font-feature-settings – Can I use より