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 |
注: 各ブラウザのサポートは、下の数字をご覧ください。
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 を参照 |
他のフォントプロパティ値のいくつかのデモ。
<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 プロパティ