CSS font プロパティ

❮ 前章へ 完全な CSS リファレンス 次へ ❯

1 回の宣言で全ての font プロパティを指定します:

p.ex1 {
    font: 15px arial, sans-serif;
}

p.ex2 {
    font: italic bold 12px/30px Georgia, serif;
}
Try it Yourself ❯

他の "Try it Yourself" 例が下にあります。


定義と用法

font ショートハンドプロパティは、1 回の宣言で全ての font プロパティを設定します.

プロパティは次の順に設定されます:"font-style font-variant font-weight font-size/line-height font-family"

font-size と font-family の値は必須です。値のいずれかを省略した場合、必要に応じてデフォルト値が使用されます。

注: line-height プロパティは、行間のスペースを設定します。

デフォルト値: 全 font プロパティのデフォルト値
継承: 継承する
アニメーション可否: yes, 個別のプロパティをご覧ください. animatable を参照 Try it
バージョン: CSS1
JavaScript 構文: object.style.font="italic small-caps bold 12px arial,sans-serif" Try it

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

プロパティ
font 1.0 4.0 1.0 1.0 3.5

注: 各ブラウザのサポートは、下の数字をご覧ください。


CSS 構文

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

プロパティの値

Property/値 説明
font-style フォントのスタイルを指定します。デフォルト値は "normal" です。指定可能な値は、 font-style をご覧ください
font-variant フォントのバリアント(スモールキャップ)を指定します。デフォルト値は "normal" です。指定可能な値は、 font-variant をご覧ください
font-weight フォントの太さを指定します。デフォルト値は "normal" です。指定可能な値は、 font-weight をご覧ください
font-size/line-height フォントのサイズと行の高さを指定します。デフォルト値は "normal" です。指定可能な値は、 font-size および line-height をご覧ください
font-family フォントファミリを指定します。デフォルト値はブラウザに依存します。指定可能な値は、 font-family をご覧ください
caption キャプション制御(ボタンやドロップダウンなど)に使用するフォントを使用します
icon アイコンラベルに使用するフォントを使用します
menu ドロップダウンメニューに使用するフォントを使用します
message-box ダイアログボックスに使用するフォントを使用します
small-caption キャプションフォントの縮小版です
status-bar ステータスバーに使用するフォントを使用します
initial プロパティにデフォルト値を設定します。initial を参照
inherit このプロパティは親要素を継承します。inherit を参照

Examples

その他の例

他のフォントプロパティ値のいくつかのデモ。

<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>
Try it Yourself ❯

関連ページ

CSS チュートリアル: CSS Font

HTML DOM リファレンス:font プロパティ


❮ 前章へ 完全な CSS リファレンス 次へ ❯