font

CSSでは、フォント関連の設定を変更することができます。

本ページでは、fontプロパティについて説明します。

fontプロパティとは

fontプロパティを使うと、フォント関連の設定を一括で行うことができます。例えば、フォントの種類を変更したり、フォントサイズを変更したりできます。

fontの定義は、以下のとおりです。

【fontの定義】
font-style || font-variant-css21 || font-weight || font-stretch font-size /line-height font-family
または、
caption | icon | menu | message-box | small-caption | status-bar
初期値 font-style:normal
font-variant-css21:normal
font-weight:normal
font-stretch:normal
font-size:medium
line-height:normal
font-family:ブラウザで決定
適用対象 すべての要素
継承 する

値で、「または、」の上のパターンを使う時は、赤字のfont-sizeとfomt-familyは必須です。

値の説明

以下は、fontで使える値と説明です。

font-style
イタリック体や斜体を指定します。
font-variant-css21
small-capsを指定すると、すべて大文字に変換されます。ただし、元々が大文字以外の文字(変換された文字)は、サイズが小さく表示されます。デフォルトはnormalで、変換しません。
font-weight
フォントの太さを指定します。
font-stretch
フォントの横幅を狭くしたり、広くしたりできます。
font-size
フォントのサイズを指定します。
/line-height
行の高さを指定します。スラッシュ(/)を付けて記述が必要です。
font-family
フォントの種類(フォントファミリ)を指定します。
caption
キャプション付きのコントロールに使用されるフォントを使います(ボタン、ドロップダウンなど)。
icon
アイコンのラベルに使用されるフォントを使います。
menu
メニューで使用されるフォントを使います(ドロップダウンメニューやメニューリストなど)。
message-box
ダイアログボックスで使用されるフォントを使います。
small-caption
小さなコントロールのラベル付けに使用されるフォントを使います。
status-bar
ウィンドウのステータスバーで使用されるフォントを使います。

font-stylefont-weightfont-sizeline-heightfont-familyについては、各リンク先をご参照ください。

利用例

利用例は、以下のとおりです。

【fontの利用例】
body {
  font: normal normal normal normal 1.1em /1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

上記は、以下のように表示されます。

font利用例

フォントサイズはデフォルトから1.1倍、行の高さはフォントサイズの1.8倍、フォントファミリは左から優先で使えるものを表示しています。

また、font-sizeとfont-family以外は必須ではないため、以下のように記述しても同じです。

【fontの利用例(必須ではなくてデフォルトから変更しないものは省略)】
body {
  font: 1.1em /1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

small-caps利用例

以下は、small-capsの利用例です。

【small-capsの利用例】
body {
  font: small-caps 1.1em "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif;
}

HTMLではp要素で、「This is a pen.」と記述されているとします。この場合、以下のように表示されます。

small-caps利用例

すべて大文字になっています。また、元々大文字だったT以外の文字は、少し小さく表示されています。

small-caption利用例

以下は、small-captionの利用例です。

【small-captionの利用例】
body {
  font: small-caption;
}

上記は、以下のように表示されます。

small-caption利用例

ブラウザのサポート状況

各ブラウザの最新バージョンでのサポート状況は、以下のとおりです。

【パソコン】
項目 IE Ed Fx Ch Sa Op
font
【スマートフォン】
項目 Sa An Op Ch Fx Sm
font
サポート
制限あり
×
未サポート
不明
IE
Internet Explorer
Ed
Edge
Fx
Firefox
Ch
Chrome
Sa
Safari
Op
Opera
An
Android Browser
Sm
Samsung Internet

※スマートフォンのFirefoxとChromeは、Android版です。

CSSプロパティ一覧」に戻る