文字の設定

フォント関連スタイルの指定をまとめて指定する

<font>は、フォント関連スタイルの指定をまとめて指定できます。

指定できるのは、<font-style>、<font-variant>、<font-weight>、<font-size>、<line-height>、<font-family>の6つのプロパティの値です。このうち<font-size>と<font-family>は省略することができません。

<font-style>

<font-style>は、フォントのスタイルを指定できます。
指定できる値は、標準（normal）、イタリック体（italic）、斜体（oblique）です。
また、初期値はnormalです。

サンプル

normal：標準フォントで表示する。
italic：イタリック体フォントで表示する。
oblique：斜体フォントで表示する。

<font-variant>

<font-variant>は、フォントをスモールキャップにするときに使用します。
指定できる値は、標準（normal）、スモールキャップ（small-caps）です。
また、初期値はnormalです。

サンプル

normal：abcABC0123456789
small-caps：abcABC0123456789

<font-weight>

<font-weight>は、フォントの太さを指定できます。
また、初期値は400(normal)です。

値

数値（100、200、300、400、500、600、700、800、900）、キーワード（normal、bold、lighter、bolder）

サンプル

数値100 数値200 数値300 数値400 数値500 数値600 数値700 数値800 数値900
キーワードnormal キーワードbold キーワードlighter キーワードbolder

<font-size>

<font-size>は、フォントのサイズを指定できます。

値

数値（pxやemやexの単位をつける）、％、キーワード（xx-small、x-small、small、medium、large、x-large、xx-large）

サンプル

数値10px 数値1em 数値5ex
75% 100% 150%
キーワードxx-small キーワードx-small キーワードsmall キーワードmedium キーワードlarge キーワードx-large キーワードxx-large

< line-height>

< line-height>は、行の高さを指定できます。

値

normal、数値（単位付）、数値、％

サンプル

この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。この文章の行の高さの設定はnormalです。

この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。この文章の行の高さの設定は12pxです。

この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。この文章の行の高さの設定は1.5です。

この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。この文章の行の高さの設定は200%です。

< font-family>

<font-family>は、フォントの種類を指定できます。

値

フォント名、キーワード（sans-serif、serif、cursive、fantasy、monospace）

サンプル

キーワードsans-serif キーワードserif キーワードcursive キーワードfantasy キーワードmonospace