【CSS】font - 文字のフォント
CSSのfontプロパティをご紹介します。
font
fontは要素のフォントやサイズなど様々なプロパティを一括定義します。
基本構文
font: スタイル 変形 太さ 横幅 サイズ/行間 書体;サイズと書体は必須項目です。
各値は個別プロパティで設定することもできます。
スタイル
文字のスタイル（通常体、筆記体、斜体など）です。
個別で定義するにはfont-styleプロパティを定義します。
詳しくは次の記事をご覧ください。
変形
文字の変形値です。
個別で定義するにはfont-variantプロパティを定義します。
詳しくは次の記事をご覧ください。
太さ
文字の太さです。
個別で定義するにはfont-weightプロパティを定義します。
詳しくは次の記事をご覧ください。
横幅
文字の横幅の値です。
個別で定義するにはfont-stretchプロパティを定義します。
詳しくは次の記事をご覧ください。
サイズ
文字のサイズです。
個別で定義するにはfont-sizeプロパティを定義します。
詳しくは次の記事をご覧ください。
行間
文字の行間です。
個別で定義するにはline-heightプロパティを定義します。
詳しくは次の記事をご覧ください。
書体
文字の書体です。
個別で定義するにはfont-familyプロパティを定義します。
詳しくは次の記事をご覧ください。
サンプル
一括設定
次のサンプルは文字のスタイルを一括定義します。
<style>
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wdth,wght@0,75..100,300..800;1,75..100,300..800&display=swap');
p {
font: italic small-caps bold normal 24px/3 "Open Sans";
}
</style>
<p>text text text text text</p>必須項目のみ
次のサンプルは文字のスタイルを必須項目のみ定義します。
<style>
p {
font: 24px serif;
}
</style>
<p>text text text text text</p>
