Search
  1. font〔フォントロパティの一括指定 〕
  2. font-family〔フォントの種類を指定 〕
  3. font-size〔フォントサイズを指定 〕
  4. font-size-adjust〔フォントサイズの調整〕
  5. font-stretch〔レンダリングするフォントの字幅を指定〕
  6. font-style〔フォントスタイルの指定〕
  7. font-variant〔スモールキャプスフォントの指定 〕
  8. font-weight〔フォントの太さを指定 〕

font
フォントロパティの一括指定

unknown

font: [ [ <‘font-style’> || || <‘font-weight’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit<;font-variant>; = = [normal | small-caps]

fontプロパティは、フォント関連のプロパティを一括指定できるショートハンドです。

font-sizefont-family以外は省略可能です。 %指定できるのは、font-sizeline-heightのみです。 省略した場合は、省略した値のデフォルト値が適用されます。

  • デフォルト値:各プロパティの値を参照
  • 適用:全要素
  • 継承:する

font-sizeプロパティline-heightプロパティの値の間にスラッシュを入れるのを忘れずに!

fontプロパティの値
説明
<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依存
  • 適用:全要素
  • 継承:する

font-familyプロパティの値
説明
family-name複数のフォント名をカンマ区切りで指定します。優先度は左が一番高くなる。
generic-family一般フォント名を指定。明朝体の場合は「serif」、ゴシック体の場合は「sans-serif」を指定。family-nameに指定したフォントがユーザーのPCにいずれもインストールされていない場合は、generic-familyに指定した一般フォントがユーザーの環境に存在するフォントから適宜に選択され適用される。
body {
	font-family:'MS Pゴシック','Osaka',Verdana,Arial, sans-serif;
}

フォント指定の際の注意点

  1. フォント名にスペースが含まれる場合は、引用符で括る

    シングルクウォーテーション、またはダブルクウォーテーションでフォント名を括ります。
    ex. 'MS ゴシック', 'MS Pゴシック', 'Times New Roman'

  2. 日本語のフォント名は全角半角に気を付ける

    'MS 明朝', 'MS P明朝','MS ゴシック', 'MS Pゴシック'に含まれるスペースは、半角スペース。 アルファベット部分は、全角大文字です。一方、'MS UI GOTHIC'は、半角大文字ですので指定の際は注意して下さい。

  3. フォント名を複数指定する場合は、カンマ区切りで指定する

    適用される優先度は左が最も高くなります。

  4. 一般フォント名指定の最後に加えておく

    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, Verdana
    serif 明朝系 【日本語(Windows)】
    'MS 明朝', 'MS P明朝'
    【日本語(Mac)】
    'ヒラギノ明朝 Pro W3'
    【欧文】
    'Times New Roman',Times,Century,Georgia
    cursive手書き風'Comic Sans MS', 'Monotype Corsiva', 'Zapf Chancery'
    fantasy装飾系alba, 'Cottonwood'
    monospace等幅系'Andale Mono', Courier, 'Lucida Console'
  5. 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

デザインとの兼ね合いでフォントサイズを固定しがちですが、ユーザビリティを考えるならユーザーがフォントサイズを自由に変更できる「相対指定」にしましょう。

font-sizeプロパティの値
キーワード説明
絶対サイズ xx-smallキーワード指定(7種類)。
xx-smallxx-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指定によるフォントサイズの比較
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: <number> | none | inherit

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 | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit
Mac IE5のみ

font-stretchプロパティは、レンダリングするフォントの字幅を指定します。

  • デフォルト値:normal
  • 適用:全要素
  • 継承:する

font-stretchプロパティの値
説明
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: normal | italic | oblique | inherit

font-styleプロパティは、文字のスタイルを指定します。 oblique(斜体フォント)は日本語フォントにはないため、日本語を斜体にする場合は、italicを使用して下さい。

  • デフォルト値:normal
  • 適用:全要素

font-styleプロパティの値
説明
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: normal | inherit | [ || || || <contextual-alt-values> || stylistic() || historical-forms || styleset( [, ]*) || character-variant( [,]*) || swash() || ornaments() || annotation() || ruby || <caps-value> || || || || slashed-zero || <east-asian-variant-values> || <east-asian-width-values> ]

font-variantプロパティは、小文字をスモールキャプスフォント(アルファベットの大文字より若干小さめの大文字)にするかを指定します。 日本語には使用しません。

small-capsを指定した要素に適用されているfont-familyプロパティ(フォントの種類)にスモールキャプスフォントが存在すれば、該当するフォントが使用されます。 存在しない場合は、ブラウザによって代替手段(通常の大文字で表示されるなど)がとられます。

  • デフォルト値:normal
  • 適用:全要素
  • 継承:する

font-variantプロパティの値
説明
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(大文字には適用されない)

small - caps(小文字に指定するとスモールキャピタルフォントで表示されまる)

PHP & JavaScript Room(小文字のみスモールキャピタルフォントで表示される)

font-weight
フォントの太さを指定

unknown

font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

font-weightプロパティは、文字の太さを指定します。

  • デフォルト値:normal
  • 適用:全要素
font-weightプロパティの値
説明
normal標準の太さ(デフォルト値)。
bold太字にする。
bolder親要素のフォントよりも太くする。
lighter親要素のフォントよりも細くする。
100
200
300
400
500
600
700
800
900
100900の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;

関連コンテンツ

Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop

polarized women