このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

font:フォント

記事Mar. 4th,2021
要素のフォントを指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
(<'font-family'>”値の初期値はユーザー・エージェントに依る)
適用対象 すべての要素
継承 する
パーセント値 一括指定が対象とする各プロパティの定義に依る
計算値 一括指定が対象とする各プロパティの定義に依る
アニメーション 一括指定が対象とする各プロパティの定義に依る

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

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-style”プロパティの値
<font-variant-css21> font-variant”プロパティの値のうちCSS2.1で定義されているもの (“normal”と“small-caps”)
<'font-weight'> font-weight”プロパティの値
<font-stretch-css3>CSS Fonts Module Level 3 で追加 font-stretch”プロパティの値のうち“CSS Fonts level 3”で定義されているもの (“normal”と“ultra-condensed”、“extra-condensed”、“condensed”、“semi-condensed”、“semi-expanded”、“expanded”、“extra-expanded”、“ultra-expanded”)
<'font-size'> font-size”プロパティの値
<'line-height'> line-height”プロパティの値
<'font-family'> font-family”プロパティの値

必要な値を半角スペース(“ ”)で区切って、複数記述することができます。ただし、値によって記述できる順番が決まっています。

<'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-style'>”値〛 〚“<font-variant-css21>”値〛 〚“<'font-weight'>”値〛 〚“<font-stretch>”値〛 〚“<'font-size'>”値〛/〚“<'line-height'>”値〛 〚“<box>”値〛 〚“<'font-family'>”値〛;}

キーワード値

説明
システムフォント
caption キャプション付きコントロールに使用されるフォント (ボタン、ドロップダウンなど。)
icon ラベルアイコンに使用されるフォント
menu メニューに使用されるフォント (ドロップダウンメニュー、メニューリストなど。)
message-box ダイアログボックスに使用されるフォント
small-caption 小さいコントロールのラベルに使用されるフォント
status-bar ウィンドウのステータスバーに使用されるフォント
他の値
共通キーワード

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

使用例

フォントを指定する

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

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

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

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

font-size: caption;

font-size: icon;

font-size: menu;

font-size: message-box;

font-size: small-caption;

font-size: status-bar;

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク