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-face/font-weight/index.html | 179 +++++++++++++++++++++ 1 file changed, 179 insertions(+) create mode 100644 files/ja/web/css/@font-face/font-weight/index.html (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 new file mode 100644 index 0000000000..77106d3ea9 --- /dev/null +++ b/files/ja/web/css/@font-face/font-weight/index.html @@ -0,0 +1,179 @@ +--- +title: font-weight +slug: Web/CSS/@font-face/font-weight +tags: + - '@font-face' + - At-rule descriptor + - CSS + - Reference + - descriptor + - 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>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
+
+ +

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)
+ +

可変フォント

+ +

多くのフォントは、一般的な太さ名との対応の中の数値の一つに対応する特定の太さを持っています。しかし、可変フォントと呼ばれる一部のフォントは、もっと高い又は低い粒度の太さの範囲に対応しており、これにより、デザイナーは選択した太さをより詳細に制御することができます。

+ +

TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。

+ +

アクセシビリティの考慮

+ +

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

+ + + +

公式定義

+ +

{{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