font
fontプロパティの役割
fontプロパティは、フォント関連のプロパティを一括して指定できます。
具体的には、以下のプロパティを一括で指定し、
- font-family(フォント名の指定)
- font-size(フォントの大きさ)
- font-style(フォントの斜め表示)
- font-weight(フォントの太さ)
- line-height(行間)
以下のプロパティには初期値を設定します。
- font-size-adjust(フォントの高さの比率補正)
- font-stretch(フォントの横幅)
- font-variant(小文字の表現方法)
fontプロパティに設定できる値
font-styleプロパティの値
italic | イタリック体(斜体)にする。なければobliqueが適用され、それでもなければnormalが適用される。 |
normal | 直立表示。初期値。 |
oblique | イタリック体(斜体)にする。なければnormalが適用される。 |
font-weightプロパティに設定できる値
数値 | 100~900迄の9段階(100ずつ変化)。値が大きいほど太字になる。 |
bold | 太字。700。 |
bolder | 直近の太さに100を加えた太さ。 |
lighter | 直近の太さから100を引いた太さ。 |
normal | 通常の太さ。400。初期値。 |
font-sizeプロパティに設定できる値
整数 | 数値+単位で指定。 |
% | 基準のサイズを100とした100分率。 |
xx-small | h6要素の大きさ。60%。 |
x-small | 75%。 |
small | h5要素の大きさ。88.8%。 |
medium | h4要素の大きさ。100%。 |
large | h3要素の大きさ。120%。 |
x-large | h2要素の大きさ。150%。 |
xx-large | h1要素の大きさ。200%。 |
larger | 現在の大きさより大きく。 |
smaller | 現在の大きさより小さく。 |
line-heightプロパティに設定できる値
line-heightプロパティを、fontプロパティで指定する場合には、半角スラッシュの後に数値を表記します。
「/1」ならば100%、「/1.2」ならば120%といった具合です。
font-familyプロパティに設定できる値
フォント名 | カンマで区切って複数を指定可能。 |
font-styleプロパティとfont-familyプロパティは省略できないため、必ず指定します。それ以外のプロパティは、省略すると初期値がセットされます。
なお、指定する順番は以下のとおりです。
fontプロパティの使い方
<p style="font:italic bold 200%/2 Arial,'MS P明朝'">fontプロパティを使ってフォントの表現方法を一括して指定しています。このサンプルではイタリック体で明朝体を表示し行間を200%にしています。</p>
fontプロパティを使ってフォントの表現方法を一括して指定しています。このサンプルではイタリック体で明朝体を表示し行間を200%にしています。
関連リンク
- プロパティリファレンス:font-size
- プロパティリファレンス:font-family
- プロパティリファレンス:font-size-adjust
- プロパティリファレンス:font-stretch
- プロパティリファレンス:font-style
- プロパティリファレンス:font-variant
- プロパティリファレンス:font-weight
よく読まれている記事
- 右クリックメニューの表示が遅い【Information】
- 画像の一部にリンクを貼る(クリッカブルマップ【Dreamweaver】
- 一定時間でローテーションする広告【JavaScript】
- Dreamweaver【Dreamweaver】
- クリックした画像を拡大・縮小する【JavaScript】
UpDate:2010-8-16