font-variation-settings
font-variation-settings は CSS のプロパティで、変更したい特性の 4 文字の軸名と特性の値を指定することにより、可変フォントに対する低水準の制御を行うことができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 62 | 17 | 62 | 11 | 62 | 11 | |
| CSS @ ルール | ||||||
| font-variation-settings は CSS の記述子で、 @font-face アットルールの中で OpenType または TrueType の低水準のフォントバリエーションを指定することができます。この記述子の値は、グローバルキーワード値を除いて font-variation-settings と同じです。 | 140 | 140 | 62 | | 140 | |
注釈 1件
実装メモ
- macOS 10.13 High Sierra 以降が必要です。
注釈 1件
実装メモ
- iOS 11以降が必要です。
基本構文
CSS
.variable-text {
font-variation-settings:
"wght" 450,
"wdth" 90,
"CASL" 1;
}ライブデモ
実務での使いどころ
-
バリアブルフォントの細かな調整
バリアブルフォントのカスタム軸（Casualness、Slantなど）をインタラクティブに変化させ、動的なタイポグラフィ表現を実現します。
注意点
- font-weight等の高レベルプロパティとfont-variation-settingsを同時に設定すると、font-variation-settingsが優先される場合があり、予期しない動作の原因になります。
アクセシビリティ
- バリアブルフォントの軸値を極端に設定するとテキストの可読性が低下するため、本文テキストでは適切な範囲内で使用してください。