フォント

font-feature-settings

font-feature-settings は、フォントが持つ OpenType の機能（カーニングや数字の幅など）を、4 文字のタグで直接オン・オフします。font-variant 系のプロパティでは書けない機能や、フォントが独自に持つ字形を使いたいときに使います。

構文

normal | <feature-tag-value>#
<feature-tag-value> = <opentype-tag> [ <integer [0,∞]> | on | off ]?

AVATAR ->
11:11 · 1/2
88:88 · 3/4

プリセット

右下の角をドラッグするとサイズを変えられます

.box {
  font-family: Inter, sans-serif;
  font-size: 18px;
  font-feature-settings: "tnum", "frac";
}

font-feature-settings"tnum", "frac"

初期状態で効いている機能を切る

"kern" offカーニングをしない

"liga" off合字（fi など）を使わない

"calt" off前後の文字で字形を変えない

機能を入れる

"tnum"数字を同じ幅にする

"frac"「1/2」を分数にする

"zero"0 に斜線を入れる

"ss01"スタイルセット 1 の字形にする

AVATAR ->
11:11 · 1/2
88:88 · 3/4

normal：初期値です。このプロパティでは何も変えません。カーニングのように、フォントやブラウザが初めから効かせている機能はそのままです。
"tnum" のように、引用符で囲んだ 4 文字のタグで機能を指定します。タグの大文字と小文字は区別します。
タグのあとに on（1）か off（0）、または 0 以上の整数を書きます。省くと on です。2 以上の整数は、別の字形をいくつか持つ機能（"salt" や "cv01" など）で何番目の字形を使うかを選びます。
カンマで区切っていくつでも並べられます。同じタグを 2 回書くと、後に書いたほうが効きます。

"kern" off：カーニング（AV や To の間を詰める調整）をしません。プレビューの「AVATAR」の文字の間が広がります。
"liga" off：fi や fl をつなげた合字を使いません。見本の Inter は合字を持たないので、プレビューは変わりません。
"calt" off：前後の文字によって字形を変える機能を切ります。Inter では「->」が 1 文字の矢印になっていたのが、ハイフンと「>」に戻ります。
"tnum"：すべての数字を同じ幅にします。1 の多い時刻と 8 の多い時刻の幅がそろいます。
"frac"：「1/2」のような数字と斜線を、1 文字の分数の形にします。
"zero"：0 に斜線を入れて、O と見分けやすくします。
"ss01"：フォントが決めた 1 番目のスタイルセット（別の字形のまとまり）にします。何が変わるかはフォントごとに違います。

スイッチに無い機能も、コードに書けば読み込み、「コードに書いたほかの機能」に並びます。仕様では空白や記号を含む 4 文字のタグも書けますが、ここでは実際のフォントで使われる英数字のタグだけを読みます。

スタイルセットや文字ごとの別の形のように、フォントが独自に持つ字形を使いたいときや、font-variant 系のプロパティにまだ対応する値が無い機能を使いたいときに使います。

"tnum" と font-variant-numeric: tabular-nums のように、font-variant 系のプロパティで書ける機能はそちらで書くよう、仕様はすすめています。両方で同じ機能を決めたときは font-feature-settings が優先されます。
継承するプロパティですが、子の要素に書くと親の値と合わさらず、まるごと置き換わります。親に "kern" off、子に "tnum" と書くと、子ではカーニングが元に戻ります。
フォントが持っていない機能を書いても、何も起きません。どの機能を持つかはフォントごとに違い、同じフォントでも配布元で違うことがあります。このサイトが Google Fonts から読み込む Inter は、元の Inter にある "zero" や "ss01" を持っていません。
主要なブラウザすべてで使えます。