font
CSSでは、フォント関連の設定を変更することができます。
本ページでは、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-style、font-weight、font-size、line-height、font-familyについては、各リンク先をご参照ください。
利用例
利用例は、以下のとおりです。
【fontの利用例】
body { font: normal normal normal normal 1.1em /1.8 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo",sans-serif; }
上記は、以下のように表示されます。
フォントサイズはデフォルトから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.」と記述されているとします。この場合、以下のように表示されます。
すべて大文字になっています。また、元々大文字だったT以外の文字は、少し小さく表示されています。
small-caption利用例
以下は、small-captionの利用例です。
【small-captionの利用例】
body { font: 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プロパティ一覧」に戻る