font-feature-settingsプロパティの説明
CSSのfont-feature-settingsプロパティは、OpenTypeフォントの拡張書体の特性を制御します。この機能は、ブラウザがテキストをレンダリングする祭に、フォントに備わっている特性を有効にするか無効にするのかを指定するものです。
font-feature-settingsを使用すると、日本語の文字詰め（カーニング）などが行なえます。現在、その役目はfont-variantに関連するプロパティに移行しています。これから実装する場合は、font-variantを使用して下さい。
font-feature-settingsに指定できる値
normal- フォントは既定値で表示されます。
<feature-tag-value>- OpenTypeフォントの特性を表すタグの値です。4文字のキーワードで示します。キーワードは二重の引用符で囲みます。オプションとして
onとoffを加えることができます。これは1と0でも指定できます。オプションを省略した場合はonとみなされます。使用できるキーワードは、OpenType機能の構文で定義されているものを参照して下さい。
font-feature-settingsの使い方とサンプルコード
font-feature-settingsプロパティの構文は以下の通りです。
/* 既定値 */
font-feature-settings: normal;
/* タグのキーワード値 */
font-feature-settings: "pwid";
font-feature-settings: "pwid" on;
font-feature-settings: "pwid" 1;
font-feature-settings: "palt" off;
font-feature-settings: "palt" 0;
/* 複数の値を有効にする */
font-feature-settings: "liga", "onum";
font-feature-settings: "tnum", "swsh";
/* グローバル値 */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: unset;
font-feature-settingsの実例
それでは実際にfont-feature-settingsプロパティの書き方を見ていきましょう。以下の例は、フォントの文字詰め（カーニング）に関する振る舞いを変更した場合の比較です。全く同じ文章であっても、字幅や大文字小文字を制御することで、大きく印象が変わります。
<section class="samp_box">
<h2>font-feature-settings: "pwid";</h2>
<p>指定なし：ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
<p id="ffs_pwid">指定あり：ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
</section>
<section class="samp_box">
<h2>font-feature-settings: "fwid";</h2>
<p>指定なし：ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
<p id="ffs_fwid">指定あり：ABCDEFG. 0123456789. 漢字とひらがなとカタカナと。</p>
</section>
.samp_box {
overflow: auto;
width: 100%;
margin-top: 1rem;
padding: 0 1rem 1rem;
background: #eee;
}
.samp_box h2 {
margin: 1rem 0 0;
font-size: 1rem;
}
.samp_box p {
margin: 1rem 0 0;
padding: .3rem;
background: #fff;
}
#ffs_pwid {
font-feature-settings: "pwid";
}
#ffs_fwid {
font-feature-settings: "fwid";
}
推奨される表記
font-feature-settingsを使用する場合は、関連するプロパティとの併記を推奨します。以下のように同じ特性を表す値を記述しておくことで、どちらかのプロパティが使用できない環境で補完されます。
/* 合字（リガチャ） */
.class {
font-variant: common-ligatures;
font-feature-settings: "liga";
}
/* スモールキャップ */
.class {
font-variant-caps: small-caps;
font-feature-settings: "smcp";
}
/* 複数の値の指定 */
.class {
font-variant: common-ligatures, oldstyle-nums;
font-feature-settings: "liga", "onum";
}