CSS3

：

プロパティ

：

font

　 編集：2022.07.14 by T.A.

→●、mdn

フォントの様々な指定： 略式プロパティ。

名前 font
値 [
[<'font-style'> || <font-variant-css21> || <'font-weight'> || <'font-stretch'>]?
　<'font-size'> [ / <'line-height'> ]? <'font-family'>
]
| caption | icon | menu | message-box | small-caption | status-bar
初期値 個々のプロパティを見よ
適用対象 個々のプロパティを見よ
継承 個々のプロパティを見よ
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
アニメーション型 個々のプロパティを見よ

font プロパティは、下に述べるものを除く、スタイルシートの中の同じ場所における［ font-style、font-variant、font-weight、font-stretch、font-size、line-height、font-family ］をまとめて設定するための、略式プロパティである。ただし、font-variant プロパティ用の値は、CSS 2.1 にてサポートされるものに限られる ─ この仕様にて font-variant 用に追加されたどの値も、font 略式プロパティには利用できない：

<font-variant-css21>
＝[normal | small-caps]

このプロパティの構文は、フォントに関係する複数のプロパティを設定するための、伝統的タイポ グラフィック上の略式記法に基づく。

以下のCSSが組み込んであります：

normal 
<SPAN style="
 font:normal 30px 'ＭＳ 明朝';
">012ABCabcfijk…漢字</SPAN>


<SPAN style="
 font:normal 30px 'Test_Font','ＭＳ 明朝';
">012ABCabcfijk…漢字</SPAN>

small-caps 
<SPAN style="
 font:small-caps 30px 'ＭＳ 明朝';
">012ABCabcfijk…漢字</SPAN>

font プロパティの下位プロパティ ─ 上に挙げたものに加えて、font-size-adjust、font-kerning、font-variant のすべての下位プロパティ、font-feature-settings、も含むが、font-synthesis は含まない ─ すべては、先ず、それぞれの初期値に再設定される。次に、各 下位プロパティには、この略式プロパティに明示的に値が与えられていれば、その値が設定される ─ 許容される値／初期値の定義は、個々の下位プロパティの定義を見よ。後方互換性の理由から、font 略式プロパティでは、font-size-adjust を初期値以外の値に設定するのは可能でない ─ 代わりに、個々のプロパティを利用すること。

次の値はシステム フォントを参照する： ¶<font-family>に値するようだ。

caption
キャプション付きのコントロール（例えば、ボタン、ドロップダウン、等々）用に利用されるフォント。
<SPAN style="font:caption; 
">012ABCabcfijk…漢字</SPAN>


<SPAN style="font:30px caption; 
">012ABCabcfijk…漢字</SPAN>

icon
アイコンにラベルを貼るために利用されるフォント。
<SPAN style="font:icon;
">012ABCabcfijk…漢字</SPAN>

menu
メニュー（例えばドロップダウンメニューやメニューリスト）に利用されるフォント。
<SPAN style="font:menu;
">012ABCabcfijk…漢字</SPAN>

message-box
ダイアログボックスに利用されるフォント。
<SPAN style="font:message-box;
">012ABCabcfijk…漢字</SPAN>

small-caption
小さなコントロールにラベルを貼るために利用されるフォント。
<SPAN style="font:small-caption;
">012ABCabcfijk…漢字</SPAN>

status-bar
ウィンドウのステータスバーに利用されるフォント。
<SPAN style="font:status-bar;
">012ABCabcfijk…漢字</SPAN>


p { font: 12pt/14pt sans-serif }

p { font: 80% sans-serif }

　↑フォントサイズ百分率値（80%）は、親要素の font-size の算出値を参照する。

p { font: x-large/110% "new century schoolbook", serif }

　↑行高百分率（110%）は、要素自身のフォントサイズを参照する。

［font-variant と font-weight］を明示的に指定しないので、これらのプロパティは、それらの初期値（normal）を受け取る。

フォント ファミリー名 "new century schoolbook" はスペースを包含しているので、引用符で括られていることに注意。 

p { font: bold italic large Palatino, serif }

　↑［font-weight を bold, font-style を italic ］に設定し、font-variant を暗黙的に normal に設定している。 

p { font: normal small-caps 120%/120% fantasy }

　↑［font-variant（small-caps）、font-size（親のフォントサイズの 120%）、line-height（フォント サイズの 120%）、font-family（fantasy）］を設定する。従って、キーワード normal は残りの 2 つのプロパティ［font-style、font-weight］に適用される。 

p { font: condensed oblique 12pt "Helvetica Neue", serif; }

　↑［font-style、font-stretch、font-size、font-family］を設定し、他のフォント プロパティは それぞれの初期値に設定させておく。

font-stretch プロパティは CSS 2.1 では定義されていないので、作者は、font 規則内で font-stretch 値を利用する際には、古いユーザー エージェントとも互換な予備のバージョンを含めるべきである： 

p {
  font: 80% sans-serif;   /*  古い UA 用  */
}

p {
  font: condensed 80% sans-serif;
}

¶省く

テスト
HTML：

ここに表示
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：