font-family
font-family は CSS のプロパティで、選択した要素に対して、フォントファミリー名や一般ファミリー名の優先順位リストを指定することができます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 1 | 12 | 1 | 1 | 18 | 1 | |
cursive | 1 | 12 | 1 | 1 | 18 | 1 |
fangsong | 1 | 12 | 1 | 1 | 18 | 1 |
fantasy | 1 | 12 | 1 | 1 | 18 | 1 |
kai | 1 | 12 | 1 | 1 | 18 | 1 |
khmer-mul | 1 | 12 | 1 | 1 | 18 | 1 |
monospace | 1 | 12 | 1 | 1 | 18 | 1 |
nastaliq | 1 | 12 | 1 | 1 | 18 | 1 |
sans-serif | 1 | 12 | 1 | 1 | 18 | 1 |
serif | 1 | 12 | 1 | 1 | 18 | 1 |
| その他 | ||||||
| font-family 属性は、テキストのレンダリングにどのフォント ファミリが使用されるかを示し、フォント ファミリ名および/または一般的なファミリ名の優先順位付きリストとして指定されます。 | 1 | 12 | 1 | 1 | 18 | 1 |
注釈 1件
実装メモ
- 「option」要素ではサポートされていません。 バグ 1536148 を参照してください。
注釈 1件
実装メモ
- `font-family:initial`を設定すると、`font-family:inherit`のように動作します。 バグ 200709 を参照してください。
注釈 1件
実装メモ
- `font-family:initial`を設定すると、`font-family:inherit`のように動作します。 バグ 200709 を参照してください。
基本構文
CSS
body {
font-family: "Noto Sans JP", "Hiragino Sans",
sans-serif;
}
code {
font-family: "Fira Code", monospace;
}ライブデモ
実務での使いどころ
-
日本語フォントスタックの設定
Webフォントを優先しつつ、OS標準の日本語フォントをフォールバックに設定し、あらゆる環境で美しいテキスト表示を実現します。
注意点
- スペースを含むフォント名は引用符で囲む必要があります。また、フォールバックの最後には必ず総称ファミリー名を指定してください。
アクセシビリティ
- 読みやすいフォントを選択し、cursiveやfantasyなどの装飾的なフォントは見出し程度に限定してください。