【CSS】font - 文字のフォント

CSSのfontプロパティについて解説します。

検証環境

CSS

macOS

14.1

font

fontは“文字プロパティの一括定義”のプロパティです。

文字のサイズや書体、太さなどを含み、各項目に対応するプロパティ（font-sizeなど）で個別に設定することなく一括定義が可能です。

基本構文

font: スタイル 変形 太さ 横幅 サイズ/行間 書体;

サイズと書体は必須項目です。

各項目の個別設定は個別プロパティで設定できます。

【CSS】font-style - 文字のスタイル

【CSS】font-variant - 文字の変形

【CSS】font-weight - 文字の太さ

【CSS】font-stretch - 文字の横幅

【CSS】font-size - 文字のサイズ

【CSS】line-height - 文字の行間

【CSS】font-family - 文字の書体

サンプル

必須項目のみ

文字のスタイルを必須項目のみ設定するサンプルです。

sample.html

<style>
p {
    ___ih_hl_start
    font: 24px serif;
    ___ih_hl_end
}
</style>
 
<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー

一括設定

文字のスタイルを一括設定するサンプルです。

sample.html

<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 {
    ___ih_hl_start
    font: italic small-caps bold normal 20px/30px "Open Sans";
    ___ih_hl_end
}
</style>
 
<p>
    CSS : Cascading Style Sheets. CSS is a programming language that decorates elements such as HTML and XML. You can set various properties such as text color, background, and size.
</p>

プレビュー