フォントショートハンドプロパティ
最終更新：2026-09-13
font フォントショートハンドプロパティ
CSS の font ショートハンドプロパティは、font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family を 1 つの宣言で設定します。スタイルシートを簡潔に保ちますが、font-size と font-family は必須で、サブプロパティは固定の順序に従う必要があります。
| カテゴリ | |
|---|---|
| 初期値 | normal normal normal 1em/normal system-ui |
| 継承 | はい |
| 適用対象 | all |
| アニメーションタイプ | font-weight |
| CSS バージョン | CSS1 |
| 状態 | 標準 |
📝 構文
font: [ <font-style> || <font-variant> || <font-weight> || <font-stretch> ]? <font-size> [ / <line-height> ]? <font-family>;⚙️ 値
| 値 | タイプ | 説明 |
|---|---|---|
<font-style> || <font-variant> || <font-weight> || <font-size> / <line-height> || <font-family> | 値 | すべてのフォントサブプロパティのショートハンド |
▶ 例
以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：
🌐 ブラウザーサポート
| ブラウザー |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| font | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| すべての主要ブラウザーでサポート | |||||
重要： font-size と font-family は必須です。どちらかが欠けても全体の宣言は無視されます。
ヒント： このショートハンドは省略したサブプロパティを初期値にリセットするため、個別のフォントプロパティを設定する他のルールより前に font を宣言してください。
❓ よくある質問
Qfont ショートハンドとサブプロパティの個別設定、どちらを使うべきですか？
Aスタイル・太さ・サイズ・行の高さ・ファミリーなど、複数のフォントプロパティを一度に設定したい場合はショートハンドを使用してください。ただし、省略したサブプロパティはすべて初期値にリセットされるため、1 つの値だけを変更したい場合（例: font-weight を bold にする）は、他の設定を消さないよう個別プロパティを書いてください。
QCSS の font ショートハンドの値の順序は重要ですか？
Aはい。font-style、font-variant、font-weight、font-stretch は省略可能で、font-size の前に任意の順序で書けます。font-size の直後には任意の /line-height が続き、font-family は最後でなければなりません。font-size と font-family の両方が必須で、どちらかが欠けると全体の宣言は無視されます。
Qfont: italic bold 20px/1.5 'Microsoft YaHei', sans-serif はどういう意味ですか？
Afont-style を italic、font-weight を bold、font-size を 20px、line-height をフォントサイズの 1.5 倍に設定します。font-family のリストは最初に Microsoft YaHei を試し、インストールされていなければ汎用の sans-serif にフォールバックします。font-variant などの省略されたサブプロパティは、初期値の normal にリセットされます。
🏷️ 関連プロパティ
💡 関連事例
📚 関連チュートリアル
