font-variation-settings

値の書き方

• normal：初期値です。このプロパティでは何も変えず、軸の値は font-weight などのプロパティやフォントの初期値で決まります。
• "wght" 650 のように、引用符で囲んだ 4 文字の軸の名前と、数値を空白で区切って書きます。名前の大文字と小文字は区別します。数値には小数や負の数も書けます。
• カンマで区切っていくつでも並べられます。同じ軸を 2 度書くと、あとに書いたほうが効きます。

軸には、どのフォントでも意味が決まっている小文字の軸（wght 太さ、wdth 幅、slnt 傾き、ital イタリック、opsz 文字の大きさに合わせた字形）と、フォントが独自に決める大文字の軸があります。フォントが持たない軸は無視され、範囲の外の値はフォントが持つ範囲の端に丸められます。

プレビューでは、見本の文字（Aag）だけに、軸の多い可変フォントの Recursive を Google Fonts から読み込んで使っています。font-variation-settings は子の要素に受け継がれるので、箱に書いた値が見本の文字に効きます。Recursive は wght（300〜1000）と slnt（-15〜0）のほかに、くだけた感じの CASL、等幅にする MONO、筆記体の字形にする CRSV（どれも 0〜1）を持っています。

よく使う場面

可変フォントが独自に持つ軸（字の丸さ、線の太さの差、等幅かどうかなど）を変えるときに使います。数値で決めるので、@keyframes や transition で軸の値をなめらかに動かすこともできます。

気をつけること

• 太さ・幅・傾き・イタリック・文字の大きさに合わせた字形には、それぞれ font-weight、font-stretch、font-style、font-optical-sizing を使うのがおすすめです。font-variation-settings は軸を全部まとめて受け継ぐので、子の要素で 1 つの軸だけを書くと、親で書いたほかの軸は消えます。また "wght" をここで決めると、font-weight（strong の太字など）を変えても太さが変わりません。
• slnt は反時計回りが正の向きなので、CSS の角度と向きが逆です。"slnt" -15 が font-style: oblique 15deg にあたります。
• 軸の名前や範囲はフォントごとに違います。使うフォントの説明（Google Fonts のページなど）で、どの軸をどの範囲で持っているかを確かめてから書きます。
• Chrome 62、Edge 17、Firefox 62、Safari 11 から使えます。