基本
MDNでは非推奨ですがfont-feature-settingsを使用します。
- Adobeサイトの「CSS での OpenType 機能の構文」ページを見るとCSSでも和文の文字詰めができるようです。
font-feature-settings: "palt";
上の設定で和文の対応書体（一部のOpenType）は詰めることができます。
仕様は、全角（1 em）の幅で設定するようにデザインされた字形のスペースを、個々の（プロポーショナルな）横の幅に収まるように再調整します。とあります。
他には字体を置き換えるプロポーショナル字形（pwid）、プロポーショナルかな（pkna）などがあるようです。
よく読むとfont-feature-settingsは文字詰め専用ではなくOpen-typeフォントの拡張機能だそうです。
主に合字や字体の設定に使うみたいです。
MDNによるとこのプロパティは非推奨でfont-variantを使うようにとあります。
ただし、font-variantには和文の文字詰め機能はないので、
文字詰めする場合はfont-feature-settingsを使わざるをえません。
MDNがいくら仕様を決めてもフォントメーカーがフォントを作らない限り実現できませんからね。font-feature-settingsによる文字詰めを含む詳細解説 Adobeサイトページ
よく使うフォントで実験してみました。
- Open-Typeであればすべて対応しているわけでは無い様です。
なので当サイトでよく使うフォントで実験してみました。よく使うフォントは主に下記の2種類です。
『游明・游ゴ』、『adobe-song-std』。
これにAdobeのよく使われるメジャーなフォントとGoogleの明朝体Google Noto Serif JP、を加えて実験しました。
本文のCSSでの文字詰め、現状は游系を使用することになりますね。
- よく使うAdobe Songは未対応。
結果は上の画像の通り、よく使うAdobe Songダメでした。
Googleもダメですね。
文字詰めできたのは游系とAdobeのポピュラーな書体だけでした。ただし、システムフォントの遊明・游ゴが使えるのは大きいですね。
本文にはWebFontあんまり使わないのでこれで十分です。
