From ec35860e99aebe90a636a33b40209894ccf6fb36 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Wed, 16 Feb 2022 09:58:00 +0900 Subject: Web/CSS/@font-face 以下の記述子の記事を移行 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/@font-face/font-weight/index.html | 175 --------------------- files/ja/web/css/@font-face/font-weight/index.md | 175 +++++++++++++++++++++ 2 files changed, 175 insertions(+), 175 deletions(-) delete mode 100644 files/ja/web/css/@font-face/font-weight/index.html create mode 100644 files/ja/web/css/@font-face/font-weight/index.md (limited to 'files/ja/web/css/@font-face/font-weight') diff --git a/files/ja/web/css/@font-face/font-weight/index.html b/files/ja/web/css/@font-face/font-weight/index.html deleted file mode 100644 index ef2d5b0919..0000000000 --- a/files/ja/web/css/@font-face/font-weight/index.html +++ /dev/null @@ -1,175 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/@font-face/font-weight -tags: - - '@font-face' - - アットルール記述子 - - CSS - - リファレンス - - 記述子 - - font-weight -translation_of: Web/CSS/@font-face/font-weight ---- -{{CSSRef}} - -`font-weight` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 - -特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 - -一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 - -## 構文 - -
/* 単一の値 */
-font-weight: normal;
-font-weight: bold;
-font-weight: 400;
-
-/* 複数の値 */
-font-weight: normal bold;
-font-weight: 300 500;
-
- -`font-weight` プロパティは、以下に挙げる値のうちの一つを使用して記述します。 - -

- -- `normal` - - : 通常のフォントの太さです。 `400` と同じです。 -- `bold` - - : 太字のフォントの太さです。 `700` と同じです。 -- `<number>` - - : 1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#Common_weight_name_mapping)にあるように、共通の太さ名に対応しています。 - -`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。 - -CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 - -

良くある太さ名の対応

- -`100` から `900` の数値は、おおよそ以下の太さ名に対応します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
- -

可変フォント

- -多くのフォントは、[一般的な太さ名との対応](#Common_weight_name_mapping)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。 - -TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 - -

アクセシビリティの考慮

- -弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#Accessibility_concerns)は、テキストを読むのが難しくなることがあります。 - - - -

公式定義

- -{{cssinfo}} - -

形式文法

- -{{csssyntax}} - -## 例 - -

@font-face 規則における通常のフォントの太さの設定

- -以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。 - -
@font-face {
-  font-family: "Open Sans";
-  src: local("Open Sans") format("woff2"),
-       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
-  font-weight: 400;
-}
- -## 仕様書 - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
- -

ブラウザーの互換性

- -{{Compat("css.at-rules.font-face.font-weight")}} - -## 関連情報 - - diff --git a/files/ja/web/css/@font-face/font-weight/index.md b/files/ja/web/css/@font-face/font-weight/index.md new file mode 100644 index 0000000000..ef2d5b0919 --- /dev/null +++ b/files/ja/web/css/@font-face/font-weight/index.md @@ -0,0 +1,175 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - アットルール記述子 + - CSS + - リファレンス + - 記述子 + - font-weight +translation_of: Web/CSS/@font-face/font-weight +--- +{{CSSRef}} + +`font-weight` は CSS の記述子で、 {{cssxref("@font-face")}} 規則で指定されたフォントの太さを指定することができます。別に {{cssxref("font-weight")}} プロパティを使用して、テキストを表示する文字の太さや細さを設定することができます。 + +特定のフォントファミリについて、同じフォントファミリの異なるスタイルに対応する様々なフォントフェイスをダウンロードできるようにすることができ、 `font-weight` 記述子を使用してフォントフェイスの太さを正確に指定することができます。 CSS 記述子の値は対応する font プロパティと同じです。 + +一般に、特定のフォントファミリには限られた太さのみが利用できます。指定された太さが存在しない場合、近い太さが使用されます。太字がないフォントでは、ふつうはユーザーエージェントが合成します。これを抑止するには、 {{cssxref('font-synthesis')}} プロパティを使用してください。 + +## 構文 + +
/* 単一の値 */
+font-weight: normal;
+font-weight: bold;
+font-weight: 400;
+
+/* 複数の値 */
+font-weight: normal bold;
+font-weight: 300 500;
+
+ +`font-weight` プロパティは、以下に挙げる値のうちの一つを使用して記述します。 + +

+ +- `normal` + - : 通常のフォントの太さです。 `400` と同じです。 +- `bold` + - : 太字のフォントの太さです。 `700` と同じです。 +- `<number>` + - : 1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#Common_weight_name_mapping)にあるように、共通の太さ名に対応しています。 + +`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は、これらの値のいずれかに変換されます。 + +CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 + +

良くある太さ名の対応

+ +`100` から `900` の数値は、おおよそ以下の太さ名に対応します。 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
+ +

可変フォント

+ +多くのフォントは、[一般的な太さ名との対応](#Common_weight_name_mapping)の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。 + +TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 + +

アクセシビリティの考慮

+ +弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#Accessibility_concerns)は、テキストを読むのが難しくなることがあります。 + + + +

公式定義

+ +{{cssinfo}} + +

形式文法

+ +{{csssyntax}} + +## 例 + +

@font-face 規則における通常のフォントの太さの設定

+ +以下の例は、ローカルの Open Sans フォントを見つけるか、またはそれをインポートして、通常の太さのフォントを使用することができます。 + +
@font-face {
+  font-family: "Open Sans";
+  src: local("Open Sans") format("woff2"),
+       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
+  font-weight: 400;
+}
+ +## 仕様書 + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS4 Fonts')}}
{{SpecName('CSS3 Fonts', '#font-prop-desc', 'font-weight')}}{{Spec2('CSS3 Fonts')}}
+ +

ブラウザーの互換性

+ +{{Compat("css.at-rules.font-face.font-weight")}} + +## 関連情報 + + -- cgit v1.2.3-54-g00ecf