CSS font 属性

定義と使用法

fontショートカット属性は、1つの宣言ですべてのフォント属性を設定します。

注釈：この属性には、6番目の値「line-height」があります。行間を設定できます。

説明

このショートカット属性は、一度に要素のフォントの2つまたはそれ以上の面を設定するために使用されます。iconなどのキーワードを使用して、要素のフォントを適切に設定し、ユーザーのコンピュータ環境の特定の面と一致させることができます。注意していただきたいのは、これらのキーワードを使用しない場合でも、少なくともフォントサイズとフォントファミリーを指定する必要があります。

以下の順序で属性を設定できます：

その中の値を設定しなくても構いません。例えば、font:100% verdana;も許可されています。設定されていない属性はデフォルト値を使用します。

参照も：

CSSトレーニング：CSS 字体

HTML DOM リファレンスマニュアル：font属性

例

すべてのフォント属性を1つの宣言で設定する：

p.ex1
  {
  font:italic arial,sans-serif;
  }
p.ex2
  {
  font:italic bold 12px/20px arial,sans-serif;
  }

自分で試してみる

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;

属性値

値 説明
font-style フォントのスタイルを指定します。参照：font-style 中の可能な値。
font-variant フォントの異体を指定します。参照：font-variant 中の可能な値。
font-weight フォントの太さを指定します。参照：font-weight 中の可能な値。
font-size/line-height フォントサイズと行高を指定します。参照：font-size そして line-height 中の可能な値。
font-family フォントカテゴリを指定します。参照：font-family 中の可能な値。
caption タイトルコントロール（例えば、ボタン、ドロップダウンリストなど）で使用されるフォントを定義します。
icon アイコンマークで使用されるフォントを定義します。
menu ドロップダウンリストで使用されるフォントを定義します。
message-box ダイアログで使用されるフォントを定義します。
small-caption キャプションフォントの小さなバージョン。
status-bar ウィンドウのステータスバーで使用されるフォントを定義します。

技術的詳細

デフォルト値： 指定されていません
継承性： はい
バージョン： CSS1
JavaScript 言語： object.style.font="italic small-caps bold 12px arial,sans-serif"

TIY 実例

すべてのフォント属性が1つの宣言内に設定されています
この例では、短縮属性を使用してフォント属性を1つの宣言内に設定する方法を示しています。
「caption」値を使用して段落のフォントを設定する
この例では、"caption"値を使用して段落のフォントを設定する方法を示しています。

ブラウザのサポート

テーブルの数字は、その属性を完全にサポートする最初のブラウザのバージョンを示しています。

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5