From ce4c4c52ab46ed108664ebc833eeab8d80bbe2f2 Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Fri, 5 Nov 2021 00:08:59 +0900 Subject: CSS Font 系のプロパティ文書の更新準備 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- files/ja/web/css/font-weight/index.html | 394 -------------------------------- files/ja/web/css/font-weight/index.md | 394 ++++++++++++++++++++++++++++++++ 2 files changed, 394 insertions(+), 394 deletions(-) delete mode 100644 files/ja/web/css/font-weight/index.html create mode 100644 files/ja/web/css/font-weight/index.md (limited to 'files/ja/web/css/font-weight') diff --git a/files/ja/web/css/font-weight/index.html b/files/ja/web/css/font-weight/index.html deleted file mode 100644 index 66b685f51b..0000000000 --- a/files/ja/web/css/font-weight/index.html +++ /dev/null @@ -1,394 +0,0 @@ ---- -title: font-weight -slug: Web/CSS/font-weight -tags: - - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' -translation_of: Web/CSS/font-weight ---- -
{{CSSRef}}
- -

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。

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

構文

- -
/* キーワード値 */
-font-weight: normal;
-font-weight: bold;
-
-/* 親要素に対して相対的なキーワード値 */
-font-weight: lighter;
-font-weight: bolder;
-
-/* 数値のキーワード値 */
-font-weight: 100;
-font-weight: 200;
-font-weight: 300;
-font-weight: 400;// normal
-font-weight: 500;
-font-weight: 600;
-font-weight: 700;// bold
-font-weight: 800;
-font-weight: 900;
-
-/* グローバル値 */
-font-weight: inherit;
-font-weight: initial;
-font-weight: unset;
-
- -

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

- -

値

- -
-
normal
-
通常のフォントの太さです。 400 と同じです。
-
bold
-
太字のフォントの太さです。 700 と同じです。
-
lighter
-
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
-
bolder
-
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
-
<number>
-
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
-
- -

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。

- -

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

- -

太さのフォールバック

- -

ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

- - - -

相対的な太さの意味

- -

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

- -

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
- -

一般的な太さ名との対応

- -

100 から 900 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
- -

可変フォント

- -

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

- -

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

- -

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

- -
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
- -

HTML

- -
-
<header>
-    <input type="range" id="weight" name="weight" min="1" max="1000" />
-    <label for="weight">Weight</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
- -

CSS

- -
/*
-Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
-and is used here under the terms of its license:
-https://github.com/LettError/mutatorSans/blob/master/LICENSE
-*/
-
-@font-face {
-  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
-  font-family:'MutatorSans';
-  font-style: normal;
-}
-
-label {
-  font: 1rem monospace;
-  white-space: nowrap;
-}
-
-.container {
-  max-height: 150px;
-  overflow-y: auto;
-}
-
-.sample {
-  text-transform: uppercase;
-  font: 1.5rem 'MutatorSans', sans-serif;
-}
-
- - - -

JavaScript

- -
let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
-
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
-
-weightInput.addEventListener('input', update);
-
-update();
-
-
- -

アクセシビリティの考慮

- -

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

- - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

- -{{csssyntax}} - -

例

- -

Setting font weights

- -

HTML

- -
<p>
-  Alice was beginning to get very tired of sitting by her sister on the
-  bank, and of having nothing to do: once or twice she had peeped into the
-  book her sister was reading, but it had no pictures or conversations in
-  it, "and what is the use of a book," thought Alice "without pictures or
-  conversations?"
-</p>
-
-<div>I'm heavy<br/>
-  <span>I'm lighter</span>
-</div>
-
- -

CSS

- -
/* 段落のテキストを太字にします */
-p {
-  font-weight: bold;
-}
-
-/* div 要素のテキストの太さを normal より 2 段階太くしますが、
-   標準的な bold より細くします */
-div {
- font-weight: 600;
-}
-
-/* span 要素のテキストの太さを親要素より
-   1 段階細くします */
-span {
-  font-weight: lighter;
-}
- -

結果

- -

{{EmbedLiveSample("Setting_font_weights","400","300")}}

- -

仕様書

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}font-weight で 1～1000 の任意の数を受け付けるよう定義。
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}初回定義
- -

ブラウザーの互換性

- -

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

diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md new file mode 100644 index 0000000000..66b685f51b --- /dev/null +++ b/files/ja/web/css/font-weight/index.md @@ -0,0 +1,394 @@ +--- +title: font-weight +slug: Web/CSS/font-weight +tags: + - CSS + - CSS Fonts + - CSS Property + - Reference + - 'recipe:css-property' +translation_of: Web/CSS/font-weight +--- +
{{CSSRef}}
+ +

font-weight は CSS のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。

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

構文

+ +
/* キーワード値 */
+font-weight: normal;
+font-weight: bold;
+
+/* 親要素に対して相対的なキーワード値 */
+font-weight: lighter;
+font-weight: bolder;
+
+/* 数値のキーワード値 */
+font-weight: 100;
+font-weight: 200;
+font-weight: 300;
+font-weight: 400;// normal
+font-weight: 500;
+font-weight: 600;
+font-weight: 700;// bold
+font-weight: 800;
+font-weight: 900;
+
+/* グローバル値 */
+font-weight: inherit;
+font-weight: initial;
+font-weight: unset;
+
+ +

font-weight プロパティは、以下の一覧から選択した単一のキーワードで指定します。

+ +

値

+ +
+
normal
+
通常のフォントの太さです。 400 と同じです。
+
bold
+
太字のフォントの太さです。 700 と同じです。
+
lighter
+
フォントの太さが親要素よりも相対的に1つ細くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
bolder
+
フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算には、フォントの太さが4つのみ考慮されることに注意してください。下記の{{anch("Meaning of relative weights", "相対的な太さの意味")}}を参照してください。
+
<number>
+
1 以上 1000 以下の {{cssxref("<number>")}} 値です。数値が大きいと、数値が小さい物より太さが太い (又は同じ) ことを表します。よく使用される値は、以下の一般的な太さ名との対応にあるように、共通の太さ名に対応しています。
+
+ +

font-weight 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は{{anch("Fallback weights", "太さのフォールバック")}}の仕組みを用いて、これらの値のいずれかに変換されます。

+ +

CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。

+ +

太さのフォールバック

+ +

ちょうど一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。

+ + + +

相対的な太さの意味

+ +

以下の表は、 lighter または bolder を指定する場合に要素の絶対的な太さを算出する方法を示しています。

+ +

なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+ +

一般的な太さ名との対応

+ +

100 から 900 の数値は、おおよそ以下の太さ名に対応します (OpenType 仕様書を参照してください)。

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
100Thin (Hairline)
200Extra Light (Ultra Light)
300Light
400Normal (Regular)
500Medium
600Semi Bold (Demi Bold)
700Bold
800Extra Bold (Ultra Bold)
900Black (Heavy)
950Extra Black (Ultra Black)
+ +

可変フォント

+ +

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

+ +

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

+ +

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。

+ +
{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}
+ +

HTML

+ +
+
<header>
+    <input type="range" id="weight" name="weight" min="1" max="1000" />
+    <label for="weight">Weight</label>
+</header>
+<div class="container">
+    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
+</div>
+
+ +

CSS

+ +
/*
+Mutator Sans is created by LettError (https://github.com/LettError/mutatorSans)
+and is used here under the terms of its license:
+https://github.com/LettError/mutatorSans/blob/master/LICENSE
+*/
+
+@font-face {
+  src: url('https://mdn.mozillademos.org/files/16011/MutatorSans.ttf');
+  font-family:'MutatorSans';
+  font-style: normal;
+}
+
+label {
+  font: 1rem monospace;
+  white-space: nowrap;
+}
+
+.container {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.sample {
+  text-transform: uppercase;
+  font: 1.5rem 'MutatorSans', sans-serif;
+}
+
+ + + +

JavaScript

+ +
let weightLabel = document.querySelector('label[for="weight"]');
+let weightInput = document.querySelector('#weight');
+let sampleText = document.querySelector('.sample');
+
+function update() {
+  weightLabel.textContent = `font-weight: ${weightInput.value};`;
+  sampleText.style.fontWeight = weightInput.value;
+}
+
+weightInput.addEventListener('input', update);
+
+update();
+
+
+ +

アクセシビリティの考慮

+ +

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

+ + + +

公式定義

+ +

{{cssinfo}}

+ +

形式文法

+ +{{csssyntax}} + +

例

+ +

Setting font weights

+ +

HTML

+ +
<p>
+  Alice was beginning to get very tired of sitting by her sister on the
+  bank, and of having nothing to do: once or twice she had peeped into the
+  book her sister was reading, but it had no pictures or conversations in
+  it, "and what is the use of a book," thought Alice "without pictures or
+  conversations?"
+</p>
+
+<div>I'm heavy<br/>
+  <span>I'm lighter</span>
+</div>
+
+ +

CSS

+ +
/* 段落のテキストを太字にします */
+p {
+  font-weight: bold;
+}
+
+/* div 要素のテキストの太さを normal より 2 段階太くしますが、
+   標準的な bold より細くします */
+div {
+ font-weight: 600;
+}
+
+/* span 要素のテキストの太さを親要素より
+   1 段階細くします */
+span {
+  font-weight: lighter;
+}
+ +

結果

+ +

{{EmbedLiveSample("Setting_font_weights","400","300")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS4 Fonts')}}font-weight で 1～1000 の任意の数を受け付けるよう定義。
{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}{{Spec2('CSS3 Fonts')}}変更なし
{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}{{Spec2('CSS2.1')}}変更なし
{{SpecName('CSS1', '#font-weight', 'font-weight')}}{{Spec2('CSS1')}}初回定義
+ +

ブラウザーの互換性

+ +

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

-- cgit v1.2.3-54-g00ecf