From 917858acd763bfb1f5d1e794c4f3bf45d00f3666 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sat, 6 Nov 2021 01:12:30 +0900 Subject: CSS Fonts の各プロパティを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 2021/11/05 時点の英語版に同期 --- files/ja/web/css/font/index.md | 448 +++++++++++++++++++---------------------- 1 file changed, 208 insertions(+), 240 deletions(-) (limited to 'files/ja/web/css/font') diff --git a/files/ja/web/css/font/index.md b/files/ja/web/css/font/index.md index 70d7bfbd7c..3b38ee62f0 100644 --- a/files/ja/web/css/font/index.md +++ b/files/ja/web/css/font/index.md @@ -3,118 +3,108 @@ title: font slug: Web/CSS/font tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-shorthand-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-shorthand-property +browser-compat: css.properties.font 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}}

- -

形式文法

+{{CSSRef}} + +**`font`** は CSS の[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)で、要素のフォントの様々なプロパティをすべて設定します。また、要素のフォントにシステムフォントを設定することもできます。 + +{{EmbedInteractiveExample("pages/css/font.html")}} + +他の一括指定プロパティ同様、個別の値が指定されなかった場合は、それぞれの初期値が設定されます (おそらく一括指定ではないプロパティを使用して設定された以前の値を上書きします)。 `font` によって直接設定できない個別指定の {{cssxref("font-size-adjust")}}, {{cssxref("font-kerning")}} も初期値に設定されます。 + +## 構成要素のプロパティ + +このプロパティは以下の CSS プロパティの一括指定です。 + +- {{cssxref("font-family")}} +- {{cssxref("font-size")}} +- {{cssxref("font-stretch")}} +- {{cssxref("font-style")}} +- {{cssxref("font-variant")}} +- {{cssxref("font-weight")}} +- {{cssxref("line-height")}} + +## 構文 + +`font` プロパティはシステムフォントを選択するための単一のキーワード、又は様々なフォント関連プロパティの一括指定のどちらかで指定することができます。 + +`font` をシステムキーワードとして指定する場合は、 `caption`, `icon`, `menu`, `message-box`, `small-caption`, `status-bar` のうちの一つでなければなりません。 + +`font` を様々なフォント関連プロパティの一括指定とする場合は、次のようになります。 + +- 次の値を含めなければなりません。 + + - {{cssxref("<font-size>")}} + - {{cssxref("<font-family>")}} + +- 次の値は任意で含めることができます。 + + - {{cssxref("<font-style>")}} + - {{cssxref("<font-variant>")}} + - {{cssxref("<font-weight>")}} + - {{cssxref("<font-stretch>")}} + - {{cssxref("<line-height>")}} + +- `font-style`, `font-variant`, `font-weight` は `font-size` よりも前になければなりません。 +- `font-variant` は CSS 2.1 で定義された値、つまり `normal` および `small-caps` のみ指定できます。 +- `font-stretch` は単一のキーワード値のみを指定することができます。 +- `line-height` は `font-size` の直後に、 "/" で区切って、 "`16px/3`" のように指定します。 +- `font-family` は指定される最後の値である必要があります。 + +### 値 + +- `<'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` + - : ラベルアイコンに使用されるシステムフォント。 +- `menu` + - : メニューに使われるシステムフォント (ドロップダウンメニュー、メニューリストなど)。 +- `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 にする。
+```css
+/* フォントの大きさを 12px に設定し、行の高さを 14px にする。
    フォントファミリは sans-serif に設定する */
 p { font: 12px/14px sans-serif }
 
@@ -131,110 +121,107 @@ p { font: bold italic large serif }
 
 /* ウィンドウのステータスバーと同じフォントに設定する */
 p { font: status-bar }
-
- -

ライブサンプル

- - +





+``` -
body, input {
+```css hidden
+body, input {
   font: 14px arial;
   overflow: hidden;
 }
@@ -283,11 +270,11 @@ p { font: status-bar }
 }
 .fontfamily {
   display: inline-block;
-}
- -

JavaScript

+} +``` -
var textAreas = document.getElementsByClassName("curCss"),
+```js hidden
+var textAreas = document.getElementsByClassName("curCss"),
     shortText = "",
     getCheckedValue,
     setCss,
@@ -308,7 +295,7 @@ getProperties = function () {
 
 getCheckedValue = function(radio_name) {
   oRadio = document.forms[0].elements[radio_name];
-  for (var i = 0; i < oRadio.length; i++) {
+  for (var i = 0; i < oRadio.length; i++) {
     if(oRadio[i].checked) {
       var propInput = "input_" + radio_name,
           curElemName = "input_" + radio_name,
@@ -327,7 +314,7 @@ setCss = function () {
 
 injectCss = function(cssFragment) {
   old = document.body.getElementsByTagName("style");
-  if (old.length > 1) {
+  if (old.length > 1) {
     old[1].parentElement.removeChild(old[1]);
   }
   css = document.createElement("style");
@@ -335,40 +322,21 @@ injectCss = function(cssFragment) {
   document.body.appendChild(css);
 }
 
-setCss();
- +setCss(); +``` + +{{ EmbedLiveSample('Live_sample','100%', '440px')}} + +## 仕様書 + +{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} + +## 関連情報 -

{{ 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")}}

+- {{cssxref("font-style")}} +- {{cssxref("font-weight")}} +- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals) -- cgit v1.2.3-54-g00ecf