Font - フォント
- font〔フォントロパティの一括指定 〕
- font-family〔フォントの種類を指定 〕
- font-size〔フォントサイズを指定 〕
- font-size-adjust〔フォントサイズの調整〕
- font-stretch〔レンダリングするフォントの字幅を指定〕
- font-style〔フォントスタイルの指定〕
- font-variant〔スモールキャプスフォントの指定 〕
- font-weight〔フォントの太さを指定 〕
font
フォントロパティの一括指定
unknown
fontプロパティは、フォント関連のプロパティを一括指定できるショートハンドです。
font-sizeとfont-family以外は省略可能です。 %指定できるのは、font-sizeとline-heightのみです。 省略した場合は、省略した値のデフォルト値が適用されます。
- デフォルト値:各プロパティの値を参照
- 適用:全要素
- 継承:する
font-sizeプロパティとline-heightプロパティの値の間にスラッシュを入れるのを忘れずに!
値
値 | 説明 |
---|---|
<font-style> | フォントスタイルの指定 |
<font-variant> | スモールキャプスフォントの指定 |
<font-weight> | フォントの太さを指定 |
<font-size> | フォントサイズを指定 |
<line-height> | 行の高さを指定 |
<font-family> | フォントの種類を指定 |
caption | ボタンやドロップダウンなどのコントロールで使用されているフォントを適用。 |
icon | ラベルアイコンで使用されているフォントを適用。 |
menu | ドロップダウンメニューなどのメニューで使用されているフォントを適用。 |
message-box | ダイアログボックスで使用されているフォントを適用。 |
small-caption | 小さなコントロールで使用されているフォントを適用。 |
status-bar | ウィンドウズのステータスバーで使用されているフォントを適用。 |
<style type="text/css"> /* 一括指定(font-size,font-family以外省略可) */ .font1 { font: italic bold x-small/1.5em Verdana; } .font2 { font: bolder 12pt/14pt 'MS ゴシック',century,Osaka,sans-serif; } .font3 { font: midium/200% monospace; } </style> <p class="font1">italic bold x-small/1.5em Verdana</p> <p class="font2">bolder 11pt/13pt "MS ゴシック",Osaka,sans-serif;</p> <p class="font3">midium/200% monospace;</p>
italic bold x-small/1.5em Verdana
bolder 11pt/13pt "MS ゴシック",Osaka,sans-serif;
midium/200% monospace;
font-family
フォントの種類を指定
unknown
font-familyプロパティは、フォントの種類を指定します。 省略した場合は、OSのデフォルト設定フォント、もしくはユーザーがブラウザ設定の既定フォントに設定したフォントが適用されます。
- デフォルト値:UA依存
- 適用:全要素
- 継承:する
値
body { font-family:'MS Pゴシック','Osaka',Verdana,Arial, sans-serif; }
フォント指定の際の注意点
- フォント名にスペースが含まれる場合は、引用符で括る
シングルクウォーテーション、またはダブルクウォーテーションでフォント名を括ります。
ex.'MS ゴシック', 'MS Pゴシック', 'Times New Roman'
- 日本語のフォント名は全角半角に気を付ける
'MS 明朝', 'MS P明朝','MS ゴシック', 'MS Pゴシック'に含まれるスペースは、半角スペース。 アルファベット部分は、全角大文字です。一方、'MS UI GOTHIC'は、半角大文字ですので指定の際は注意して下さい。
- フォント名を複数指定する場合は、カンマ区切りで指定する
適用される優先度は左が最も高くなります。
- 一般フォント名指定の最後に加えておく
OSの種類やバージョン、ユーザー環境によってPCにインストールされているフォントが異なるため、 フォント名で指定したフォントが全てインストールされていない場合、 ユーザ環境で一般フォント名に関連付けられたフォントを表示させるよう、一般フォント名指定は忘れずに。
例えば
font-family: 'MS ゴシック', Osaka, Verdana, sans-serif;
と指定した場合は、 「'MS ゴシック'がないならOsaka、OsakaもないならVerdana, Verdanaもないならゴシック体フォントとして関連付けられているフォントを表示する」ということになります。一般フォント名 一般フォント名 書体 対応するフォント名 sans-serif ゴシック系 【日本語(Windows)】
'MS ゴシック', 'MS Pゴシック', 'MS UI GOTHIC'
【日本語(Mac)】
Osaka, Osaka-等幅
【欧文】
Arial, Helvetica, Verdanaserif 明朝系 【日本語(Windows)】
'MS 明朝', 'MS P明朝'
【日本語(Mac)】
'ヒラギノ明朝 Pro W3'
【欧文】
'Times New Roman',Times,Century,Georgiacursive 手書き風 'Comic Sans MS', 'Monotype Corsiva', 'Zapf Chancery' fantasy 装飾系 alba, 'Cottonwood' monospace 等幅系 'Andale Mono', Courier, 'Lucida Console' - IE5では、一般フォント名指定のみだと文字化けするバグがある
文字化けを回避するためには、一般フォント名の前に日本語フォントを指定します。
ex.font-family:'MS ゴシック', sans-serif;
設置サンプル
<p style='font-family: serif;'>serif 明朝系フォント</p> <p style='font-family: sans-serif;'>sans-serif ゴシック系フォント</p> <p style='font-family: cursive;'>cursive 草書系フォント</p> <p style='font-family: fantasy;'>fantasy 装飾系フォント</p> <p style='font-family: monospace;'>monospace 等幅系フォント</p> <style type="text/css"> /* ゴシック系フォント */ .gothic { font-family:"MS Pゴシック",Osaka,sans-serif; } /* 明朝系フォント */ .myocho { font-family:"MS P明朝","ヒラギノ明朝 Pro W3",serif; } </style> <p class='gothic'>font-family:"MS ゴシック",Osaka,sans-serif;</p> <p class='myocho'>font-family:"MS P明朝","ヒラギノ明朝 Pro W3",serif;</p>
serif 明朝系フォント
sans-serif ゴシック系フォント
cursive 草書系フォント
fantasy 装飾系フォント
monospace 等幅系フォント
font-family:"MS ゴシック",Osaka,sans-serif;
font-family:"MS P明朝","ヒラギノ明朝 Pro W3",serif;
font-size
フォントサイズを指定
unknown
font-sizeプロパティは、文字の大きさを指定します。
- デフォルト値:medium(10pt)
- 適用:全要素
- 継承:する
いろいろな単位の指定が可能ですが、下記が一般的です。
- リキッドサイズなら → 絶対サイズ、%、em
- 固定サイズなら → px
デザインとの兼ね合いでフォントサイズを固定しがちですが、ユーザビリティを考えるならユーザーがフォントサイズを自由に変更できる「相対指定」にしましょう。
値
値 | キーワード | 説明 |
---|---|---|
絶対サイズ | xx-small | キーワード指定(7種類)。 xx-small~xx-largeまで1.2 倍ずつ大きくなる。 midiumは10pt、largeは15pt相当。 |
x-small | ||
small | ||
medium | ||
large | ||
x-large | ||
xx-large | ||
相対サイズ | smaller | 親要素のフォントサイズよりも小さく。 |
larger | 親要素のフォントサイズよりも大きく。 | |
<長さ> |
em、pxなど。 ※読みやすい標準的なフォントサイズは、12px(9~10pt)です。 フォントサイズを固定する場合は、10px、8pt 以下のフォントサイズはは小さすぎて読みにくいのでなるべく使用しない方がよいでしょう。 |
|
<%> | 親要素のフォントサイズを基準に%指定。 |
px(ピクセル)指定 | pt(ポイント)指定 |
---|---|
22px サンプル | 22pt サンプル |
21px サンプル | 21pt サンプル |
20px サンプル | 20pt サンプル |
19px サンプル | 19pt サンプル |
18px サンプル | 18pt サンプル |
17px サンプル | 17pt サンプル |
16px サンプル | 16pt サンプル |
15px サンプル | 15pt サンプル |
14px サンプル | 14pt サンプル |
13px サンプル | 13pt サンプル |
12px サンプル | 12pt サンプル |
11px サンプル | 11pt サンプル |
10px サンプル | 10pt サンプル |
9px サンプル | 9pt サンプル |
8px サンプル | 8pt サンプル |
7px サンプル | 7pt サンプル |
6px サンプル | 6pt サンプル |
設置サンプル
<style type="text/css"> .pe { font-size: 120%; } /* パーセント指定(相対サイズ指定) */ .8em { font-size: 0.8em; } /* em 指定(相対サイズ指定) */ .pt { font-size: 11pt; } /* ポイント指定(絶対サイズ指定) */ .px { font-size: 10px; } /* ピクセル指定(絶対サイズ指定) */ </style> <p class='pe'>font-size: 120%;</p> <p class='8em'>font-size: 0.8em;</p> <p class='pt'>font-size: 11pt;</p> <p class='px'>font-size: 10px;</p>
font-size: 120%;
font-size: 0.8em;
font-size: 11pt;
font-size: 10px;
font-size-adjust
フォントサイズの調整
unknown
font-size-adjustプロパティは、複数のフォント間におけるフォントの見た目の大きさを調整します。
- デフォルト値:none
- 適用:全要素
- 継承:する
設置サンプル
<style type="text/css"> #d_adjust { font-family:verdana,times; font-size:20px; } #d_adjust span { border:solid 1px red; } #d_adjust .adjust { font-size-adjust:0.5; } </style> <p id="d_adjust"><span>b</span><span class="adjust">b</span></p>
bb
font-stretch
レンダリングするフォントの字幅を指定
unknown
font-stretchプロパティは、レンダリングするフォントの字幅を指定します。
- デフォルト値:normal
- 適用:全要素
- 継承:する
値
値 | 説明 |
---|---|
ultra-condensed extra-condensed condensed semi-condensed normal semi-expanded expanded extra-expanded ultra-expanded |
ultra-condensedが最も字幅が狭く、ultra-expandedが最も字幅が広くなります。 |
wider | 親要素のフォントの字幅より広くする。 |
narrower | 親要素のフォントの字幅より狭くする。 |
設置サンプル
<p style="text-align:center;font-size:3em;"> <span style='font-stretch:normal;'>e</span> <span style='font-stretch:wider;'>e</span> <span style='font-stretch:narrower;'>e</span> <span style='font-stretch:ultra-condensed;'>e</span> <span style='font-stretch:extra-condensed;'>e</span> <span style='font-stretch:condensed;'>e</span> <span style='font-stretch:semi-condensed;'>e</span> <span style='font-stretch:semi-expanded;'>e</span> <span style='font-stretch:expanded;'>e</span> <span style='font-stretch:extra-expanded;'>e</span> <span style='font-stretch:extra-expanded;'>e</span> <span style='font-stretch:ultra-expanded;'>e</span> </p>
e e e e e e e e e e e e
font-style
フォントスタイルの指定
unknown
font-styleプロパティは、文字のスタイルを指定します。 oblique(斜体フォント)は日本語フォントにはないため、日本語を斜体にする場合は、italicを使用して下さい。
- デフォルト値:normal
- 適用:全要素
値
値 | 説明 |
---|---|
normal | 通常(デフォルト値)。 |
italic | イタリック体フォントで表示されます。 指定したフォントにイタリック体がない場合は、標準フォントを斜めにして表示します。 |
oblique | 斜体フォントで表示されます。指定したフォントに斜体がない場合は、標準フォントを斜めにして表示します。 |
設置サンプル
<p style='font-style: normal;'>font-style: normal; (標準)</p> <p style='font-style: italic;'>font-style: italic; (斜体)</p> <p style='font-style: oblique;'>font-style: oblique; (オブリーク)</p>
font-style: normal; (標準)
font-style: italic; (斜体)
font-style: oblique; (オブリーク)
font-variant
スモールキャプスフォントの指定
unknown
font-variantプロパティは、小文字をスモールキャプスフォント(アルファベットの大文字より若干小さめの大文字)にするかを指定します。 日本語には使用しません。
small-capsを指定した要素に適用されているfont-familyプロパティ(フォントの種類)にスモールキャプスフォントが存在すれば、該当するフォントが使用されます。 存在しない場合は、ブラウザによって代替手段(通常の大文字で表示されるなど)がとられます。
- デフォルト値:normal
- 適用:全要素
- 継承:する
値
値 | 説明 |
---|---|
normal | 通常のフォントを使用(デフォルト値)。 |
small-caps | スモールキャピタルフォントを使用。 ※大文字には適用されず、小文字のみスモールキャピタルにします。 |
設置サンプル
SMALL - CAPS(通常のアルファベットの大文字) <p style='font-variant:small-caps;'>SMALL - CAPS(大文字には適用されない)</p> <p style='font-variant:small-caps;'>small - caps(小文字に指定するとスモールキャピタルフォントで表示されまる)</p> <p style='font-variant:small-caps;'>PHP & JavaScript Room(小文字のみスモールキャピタルフォントで表示される)</p>
SMALL - CAPS(大文字には適用されない)
small - caps(小文字に指定するとスモールキャピタルフォントで表示されまる)
PHP & JavaScript Room(小文字のみスモールキャピタルフォントで表示される)
font-weight
フォントの太さを指定
unknown
font-weightプロパティは、文字の太さを指定します。
- デフォルト値:normal
- 適用:全要素
値 | 説明 |
---|---|
normal | 標準の太さ(デフォルト値)。 |
bold | 太字にする。 |
bolder | 親要素のフォントよりも太くする。 |
lighter | 親要素のフォントよりも細くする。 |
100 200 300 400 500 600 700 800 900 | 100~900の100刻みの整数値で指定。数値が大きいほど太くなります。 400はnormalと同じ。 900はboldと同じ。 |
設置サンプル
<p style='font-weight: lighter;'>font-weight: lighter; (細め)</p> <p style='font-weight: normal;'>font-weight: normal; (通常)</p> <p style='font-weight: bold;'>font-weight: bold; (太字)</p> <p style='font-weight: bolder;'>font-weight: bolder; (太め)</p> <p style='font-weight: 100;'>font-weight: 100;</p> <p style='font-weight: 200;'>font-weight: 200;</p> <p style='font-weight: 300;'>font-weight: 300;</p> <p style='font-weight: 400;'>font-weight: 400;</p> <p style='font-weight: 500;'>font-weight: 500;</p> <p style='font-weight: 600;'>font-weight: 600;</p> <p style='font-weight: 700;'>font-weight: 700;</p> <p style='font-weight: 800;'>font-weight: 800;</p> <p style='font-weight: 900;'>font-weight: 900;</p>
font-weight: lighter; (細め)
font-weight: normal; (通常)
font-weight: bold; (太字)
font-weight: bolder; (太め)
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;