“font”プロパティ:フォント

概要

“font”プロパティは要素のテキストに使用するフォントや文字の大きさ、字体などを指定する以下のプロパティの一括指定プロパティです。

• “font-style”プロパティ
• “font-variant”プロパティ
• “font-weight”プロパティ
• “font-stretch”プロパティ
• “font-size”プロパティ
• “line-height”プロパティ
• “font-family”プロパティ

“font”プロパティは他の一括指定プロパティと同様に省略された値の設定を初期値に戻します。“font”プロパティでは具体的な指定ができないものの、“font”プロパティは以下のプロパティの一括指定プロパティにもなっており、これらのプロパティの指定を初期値に戻します。

• “font-size-adjust”プロパティ
• “font-kerning”プロパティ
• “font-feature-settings”プロパティ
• “font-language-override”プロパティ
• “font-optical-sizing”プロパティ
• “font-variation-settings”プロパティ
• “font-palette”プロパティ

サンプルコード

p { font: bold 1.5em "游明朝","ヒラギノ明朝",serif;}


値

フォントの詳細な指定

必要な値をホワイトスペースで区切って、複数記述することができます。ただし、値によって記述できる順番が決まっています。

“<'font-style'>”値、“<font-variant-css21>”値、“<'font-weight'>”値、“<font-stretch-css3>”値は任意の順番で1個ずつ指定できます。省略された値は初期値として設定されます。

次に“<'font-size'>”値は必須で1個指定しなければなりません。“<'line-height'>”値を指定する場合は“<'font-size'>”値の後にスラッシュ(“/”)で区切って記述します。“<'line-height'>”値を省略した場合は初期値として設定されます。

“<'font-family'>”値を一番最後に記述します。“<'font-family'>”値の指定は必須です。

最小限の値を記述した場合
div { font: 〚“<'font-size'>”値〛 〚“<'font-family'>”値〛;}

値をすべて記述した場合
div { font: 〚“<'font-style'>”値〛 〚“<font-variant-css21>”値〛 〚“<'font-weight'>”値〛 〚“<font-stretch>”値〛 〚“<'font-size'>”値〛/〚“<'line-height'>”値〛 〚“<box>”値〛 〚“<'font-family'>”値〛;}


キーワード値

システムフォントを指定する場合はいずれかの値を1個だけ指定でき、その値によってフォントや文字の大きさ、字体などが一括で設定されます。“<'font-size'>”値など、他の値との併用はできません。

仕様書

定義されている仕様書

font

<'font-style'>
<font-variant-css21>
<'font-weight'>
<'font-size'>
<'line-height'>
<'font-family'>
caption
icon
menu
message-box
small-caption
status-bar
<font-stretch>

フォントを指定する

p { font: bold 1.5em "游明朝","ヒラギノ明朝",serif;}


春は曙。やうやう白くなりゆく山際、すこしあかりて、紫だちたる雲の細くたなびきたる。

システムフォントを使用する

.font-caption { font: caption;}
.font-icon { font: icon;}
.font-menu { font: menu;}
.font-message-box { font: message-box;}
.font-small-box { font: small-box;}
.font-status-bar { font: status-bar;}


<p class="font-caption">font: caption;</p>
<p class="font-icon">font: icon;</p>
<p class="font-menu">font: menu;</p>
<p class="font-message-box">font: message-box;</p>
<p class="font-small-caption">font: message-box;</p>
<p class="font-status-bar">font: message-box;</p>


font: caption;

font: icon;

font: menu;

font: message-box;

font: small-caption;

font: status-bar;