概要
CSSプロパティ｢font｣は、フォントを指定することができるショートハンドです。指定できるプロパティは以下の通りで、指定する順序が決まっています(1~3までは順不同)。
- font-style
- font-variant
- font-weight
- font-size 指定必須
- line-height
- font-family 指定必須
<p class="font">
都道府県は、北海道、青森県、岩手県、宮城県、秋田県、山形県、福島県、茨城県、栃木県、群馬県、埼玉県、千葉県、東京都、神奈川県・・・宮崎県、鹿児島県、沖縄県です
</p>
<style>
.font {
font: 1em "ＭＳ 明朝", serif;
}
</style>値の指定方法
{ font: <font-size> <font-familiy>} 必須パターンのみ
{ font: (<font-style> <font-variant> <font-weight>この中は順不同) <font-size> <line-height> <font-family>}値の順序と必須項目があることに注意してください。
プロパティの種類について
｢font｣プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。
| プロパティ名 | 説明 |
|---|---|
| font | フォントに関する指定をまとめて行うショートハンドプロパティ |
| font-style | フォントのスタイルを指定する |
| font-variant | フォントのスモールキャップ指定する |
| font-weight | フォントの太さを指定する |
| font-size | フォントのサイズを指定する |
| font-family | フォントの種類を指定する |
| font-size-adjust | フォントのサイズを調整する |
| font-stretch | フォントを縦長・横長にする |
使用例
いくつか異なった値を指定した時の表示を確認してみましょう
<p>※必須値のみ</p>
<p class="font">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<p>※必須値 + font-style</p>
<p class="font-style">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<p>※必須値 + font-style + font-variant</p>
<p class="font-variant">abcdefgABCDEFG</p>
<p>※必須値 + font-style</p>
<p class="font-style">都道府県は、北海道、青森県、岩手県、・・・宮崎県、鹿児島県、沖縄県です</p>
<style>
.font {
font: 1em "ＭＳ 明朝", serif;
}
.font-style {
font: italic 1em "ＭＳ 明朝", serif;
}
.font-variant {
font: italic small-caps 1em "ＭＳ 明朝", serif;
}
</style>