From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/css/font/index.html | 376 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 376 insertions(+) create mode 100644 files/ja/web/css/font/index.html (limited to 'files/ja/web/css/font') diff --git a/files/ja/web/css/font/index.html b/files/ja/web/css/font/index.html new file mode 100644 index 0000000000..c4c5020373 --- /dev/null +++ b/files/ja/web/css/font/index.html @@ -0,0 +1,376 @@ +--- +title: font +slug: Web/CSS/font +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-shorthand-property' +translation_of: Web/CSS/font +--- +
{{CSSRef}}
+ +

font は CSS の一括指定プロパティで、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。

+ +
{{EmbedInteractiveExample("pages/css/font.html")}}
+ + + +

他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 font によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。

+ +

構成要素のプロパティ

+ +

このプロパティは以下の CSS プロパティの一括指定です。

+ + + +

構文

+ +

font プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。

+ +

font をシステムキーワードとして指定する場合は、 caption, icon, menu, message-box, small-caption, status-bar のうちの一つでなければなりません。

+ +

font を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。

+ + + +

値

+ +
+
<'font-style'>
+
{{Cssxref("font-style")}} プロパティを参照。
+
<'font-variant'>
+
{{Cssxref("font-variant")}} プロパティを参照。
+
<'font-weight'>
+
{{Cssxref("font-weight")}} プロパティを参照。
+
<'font-stretch'>
+
{{Cssxref("font-stretch")}} プロパティを参照。
+
<'font-size'>
+
{{Cssxref("font-size")}} プロパティを参照。
+
<'line-height'>
+
{{cssxref("line-height")}} プロパティを参照。
+
<'font-family'>
+
{{Cssxref("font-family")}} プロパティを参照。
+
+ +

システムフォント値

+ +
+
caption
+
キャプション付きコントロールに使われるシステムフォント (ボタン、ドロップダウンなど)。
+
icon
+
ラベルアイコンに使用されるシステムフォント。
+ +
メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。
+
message-box
+
ダイアログボックスに使われるシステムフォント。
+
small-caption
+
小さいコントロールのラベルに使われるシステムフォント。
+
status-bar
+
ウィンドウのステータスバーに使われるシステムフォント。
+
接頭辞付きのシステムフォントキーワード
+
ブラウザーは他にも、接頭辞付きのキーワードをいくつか実装していることがあります。 Gecko は、 -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, -moz-field を実装しています。
+
+ +

公式定義

+ +

{{CSSInfo}}

+ +

形式文法

+ +
{{CSSSyntax}}
+ +

例

+ +

フォントのプロパティの設定

+ +
/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
+   フォントファミリは sans-serif に設定する */
+p { font: 12px/14px sans-serif }
+
+/* フォントの大きさを親要素の 80% または既定値
+   (親要素がない場合) に設定する。
+   フォントファミリは sans-serif に設定する */
+p { font: 80% sans-serif }
+
+/* フォントの太さを太字に、
+   フォントスタイルを斜体に、
+   フォントの大きさを large に、
+   フォントファミリーは serif に設定する */
+p { font: bold italic large serif }
+
+/* ウィンドウのステータスバーと同じフォントに設定する */
+p { font: status-bar }
+
+ +

ライブサンプル

+ + + +

{{ EmbedLiveSample('live_sample','100%', '440px')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Fonts', '#font-prop', 'font')}}{{Spec2('CSS3 Fonts')}}font-stretch の値の対応を追加
{{SpecName('CSS2.1', 'fonts.html#font-shorthand', 'font-weight')}}{{Spec2('CSS2.1')}}キーワードへのサポートが追加されました
{{SpecName('CSS1', '#font', 'font')}}{{Spec2('CSS1')}}初回定義。
+ +

ブラウザーの互換性

+ + + +

{{Compat("css.properties.font")}}

-- cgit v1.2.3-54-g00ecf