font-style font-weight任意の値を大きさより前へ置く
normal・italicなどのスタイルと、400・700などの太さは省略できます。書く場合はfont-sizeより前に置きます。
font
文字のスタイル・太さ・大きさ・行間・書体を、1つの宣言にまとめて指定する一括指定プロパティ。値を組み合わせ、順番にも意味がある構文を動かして学びます。
CSSのfontとは？
font-style・font-weight・font-size・line-height・font-familyを1つの宣言にまとめ、正しい順番と一括指定で初期値へ戻る項目を初学者向けに解説します。
遊んでみよう
style・weight・size / line-height・family
見て、動かして、
文字を整える。
CSS
.element font: normal 400 28px / 1.5 system-ui, sans-serif;
値のパターン
fontの構成要素
font-size / line-height大きさは必須、行の高さはスラッシュで続ける
font-sizeは必ず書きます。line-heightを加える場合は、28px / 1.5のように直後へ「/」で区切ります。
font-family書体を最後へ置く
font-familyも必須です。候補をカンマで並べられますが、構文全体では必ず最後に置きます。
早見表
最短ではfont-sizeとfont-familyだけを書けます。教材では値の順番が見えるよう、style・weight・size / line-height・familyをすべて表示します。
01
16px system-ui大きさと書体だけを指定する最短構文02
italic 700 24px / 1.3 serifスタイル・太さ・行間もまとめる順番に注意03
400 1rem / 1.7 sans-serif本文向けの組み合わせ単位なし行間04
captionOSのキャプション用フォントを使うシステム値05
inherit親要素の関連指定を受け継ぐグローバルよくある使い方
01
サイトの本文をまとめて整える
bodyへ大きさ・行間・書体をまとめ、子要素へ継承される文字の基準を作れます。
body { font: 400 1rem / 1.7 system-ui, sans-serif; }02
カード見出しの強さを揃える
太さ・大きさ・行間を1か所に並べ、短い見出しの文字設定をまとめて確認できます。
.card-title { font: 700 1.75rem / 1.2 system-ui, sans-serif; }03
引用文へイタリック体を使う
blockquoteなど意味のあるHTML要素へ、イタリック体とセリフ書体をまとめて指定します。
blockquote { font: italic 400 1.25rem / 1.6 serif; }ポイント
短く書くと、省略した関連プロパティも初期値へ戻る。
fontはfont-style・font-variant・font-weight・font-stretch・font-size・line-height・font-familyをまとめる一括指定です。font-sizeとfont-familyは必須で、style・variant・weight・stretchはsizeより前、line-heightはsizeの直後へ「/」で区切り、familyは最後に置きます。省略した構成要素は以前の個別指定を保たず、それぞれの初期値へ戻ります。font-size-adjustとfont-kerningも初期値へ戻る点に注意します。すべての要素とテキストに適用でき、各構成要素は子要素へ継承されます。
関連するCSSも見てみよう。
font と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。