font/フォント全般

fontプロパティを使うとフォントの種類、サイズ、太字、斜体等の設定を一括で指定出来ます。

説明

 フォントの設定は個別に以下の設定が可能ですが、fontはこれらの設定を一括で行えます。

・font-family
フォントの種類
・font-size
フォントの大きさであるサイズ
・font-weight
太字
・font-style
斜体

構文

 fontプロパティの構文は以下の通りです。

font: 斜体 太字 サイズ 種類;

 斜体部分は以下の3つから指定出来ます。

【フォントスタイル】
種類 説明
normal デフォルト
italic イタリック体
oblique 斜体

 殆どの場合、イタリック体を指定すると斜体で表示されます。

 太字部分は以下の5つから指定出来ます。

【文字の太さ】
太さ 説明
normal デフォルト
bold 太字
lighter 一段階細く
bolder 一段階太く
数字 100から900で太さを指定

 細かく指定は出来ますが、殆どの場合はデフォルトか太字でしか表示出来ないため、boldかnormalだけ指定するのが普通です。

 サイズは以下の指定が可能です。

【文字サイズ】
サイズ 説明
% 現在の大きさに対する割合
em 現在のフォントサイズの何倍か
larger 一段階大きく
smaller 一段階小さく
xx-small 一番小さい
x-small 二番目に小さい
small 小さい
midium 標準
large 少し大きく
x-large もっと大きく
xx-large 一番大きい

 フォント種類の例は以下です。

【フォント種類】
フォント 概要
MS Pゴシック WindowsXP以前の標準
メイリオ WindowsVistaで追加
Meiryo UI Windows7で追加
Osaka かなり以前のMac標準
ヒラギノ角ゴ Pro W3 Mac OS Xで追加
Hiragino Kaku Gothic ProN iPhoneのiOSで利用
serif 明朝体等
sans-serif ゴシック体等
monospace 等幅フォント

 2つ以上のフォントも指定可能で、その場合は,で区切って指定します。複数指定した場合は左から優先してパソコンやスマートフォンでインストールされているフォントが使われます。

 半角スペースがあるフォント名は"や'で囲む必要がありますが、最後3つのserifやsans-serif、monospaceは囲まないようにする必要があります。

利用例

 fontの利用例は以下の通りです。上の記述がCSS外部ファイル、下の記述がHTMLファイルです。

span {
font: oblique bold 150% Arial;
}

文章の途中で<span>Englis</span>

 上記は斜体、太字、サイズを150%、フォントをArialで指定しています。これを表示すると以下になります。

文章の途中でEnglish

 フォントの種類を複数指定した場合の例は以下です。

span {
font: oblique bold 2em 'MS Pゴシック','MSゴシック','ヒラギノ角ゴ Pro W3',serif;
}

文章の途中で<span>表示変更</span>

 上記は斜体、太字、サイズを2em、フォントは複数指定しています。これを表示すると以下になります。

文章の途中で表示変更

補足

 通常はフォントの種類やサイズをbodyで設定してページ全体に反映させ、その時々で変えたい場合はクラスや<span>タグを利用して指定します。

設定の詳細

 設定の詳細と利用例は以下をご参照下さい。

関連ページ

・ホームページ作成「フォントの変更

 フォントの種類やサイズ、色や太字等フォント全般の変更方法を説明しています。

・ホームページ作成「スタイルシートの定義方法

 外部ファイルやHTMLに直接記述する方法等、CSSの記述方法や、優先度、入れ子等について説明しています。

検索付「CSSプロパティ早見表」に戻る

スマホ向け「CSSプロパティ一覧」に戻る

  • このエントリーをはてなブックマークに追加

★上ページに含まれるプロパティ

Access:カウンター(total)

Today:カウンター(today)   Yesterday:カウンター(yesyerday)