UI fonts
OSやデバイスのUI向けに設計されたフォントファミリーを利用するための値です。system-uiがOSの標準フォントを使用するのに対し、ui-serif等はカテゴリ別のUIフォントを選択できます。特にui-roundedはiOS/macOSでSF Rounded等の角丸フォントが選択され、親しみやすいデザインに適しています。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
css.properties.font-family.ui-monospace | | | | 13.1 | | 13.4 |
| CSS プロパティ | ||||||
ui-rounded | | | | 13.1 | | 13.4 |
ui-sans-serif | | | | 13.1 | | 13.4 |
ui-serif | | | | 13.1 | | 13.4 |
基本構文
CSS
.serif-ui { font-family: ui-serif, serif; }
.mono-ui { font-family: ui-monospace, monospace; }
.friendly { font-family: ui-rounded, system-ui; }ライブデモ
実務での使いどころ
-
ネイティブアプリ風のUI表示
PWAのUIにui-roundedやui-sans-serifを使用し、OSの標準アプリと調和した自然な見た目を実現します。
注意点
- Safari以外のブラウザサポートが限定的なため、必ず総称ファミリー名をフォールバックに指定してください。
アクセシビリティ
- UIフォントはOSの設定を反映するため、ユーザーが設定した読みやすさの設定が適用されやすい利点があります。