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-weight/index.md | 442 +++++++++++----------------------- 1 file changed, 145 insertions(+), 297 deletions(-) (limited to 'files/ja/web/css/font-weight/index.md') diff --git a/files/ja/web/css/font-weight/index.md b/files/ja/web/css/font-weight/index.md index 66b685f51b..75d0cf888f 100644 --- a/files/ja/web/css/font-weight/index.md +++ b/files/ja/web/css/font-weight/index.md @@ -3,23 +3,23 @@ title: font-weight slug: Web/CSS/font-weight tags: - CSS - - CSS Fonts - - CSS Property - - Reference - - 'recipe:css-property' + - CSS フォント + - CSS プロパティ + - リファレンス + - recipe:css-property +browser-compat: css.properties.font-weight translation_of: Web/CSS/font-weight --- -
{{CSSRef}}
+{{CSSRef}} -

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

+**`font-weight`** は [CSS](/ja/docs/Web/CSS) のプロパティで、フォントの太さ (あるいは重み) を指定します。実際に表示されるフォントの太さは、現在設定されている {{cssxref("font-family")}} に依存する場合があります。 -
{{EmbedInteractiveExample("pages/css/font-weight.html")}}
+{{EmbedInteractiveExample("pages/css/font-weight.html")}} - +## 構文 -

構文

- -
/* キーワード値 */
+```css
+/* キーワード値 */
 font-weight: normal;
 font-weight: bold;
 
@@ -41,300 +41,171 @@ font-weight: 900;
 /* グローバル値 */
 font-weight: inherit;
 font-weight: initial;
+font-weight: revert;
 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` プロパティは、以下の一覧から選択した単一のキーワードで指定します。 -

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

+### 値 -

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

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

太さのフォールバック

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

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

+CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任意の数値を受け付けるようになり、{{anch("Variable fonts", "可変フォント")}}が導入され、フォントの太さにもっと細かい範囲を使用することができるようになりました。 - +正確に一致する太さが利用できない場合、実際に表示される太さを定めるために以下の規則が使用されます。 -

相対的な太さの意味

+- 対象となる太さがが `400`～`500` で指定された場合 -

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

+ - 利用できる太さを、対象値から `500` までの間で昇順で探します。 + - 一致するものがなければ、対象値未満の利用できる太さを降順で探します。 + - 一致するものがなければ、 `500` より大きい太さを昇順で探します。 -

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

+- 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。 +- 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
+### 相対的な太さの意味 -

一般的な太さ名との対応

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

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

+なお、相対的な太さを使用した場合、 thin (100), normal (400), bold (700), heavy (900) の4つの太さのみが考慮されます。 font-family でもっと多くの太さが利用できる場合であっても、相対的な太さの計算の用途では無視されます。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
値太さ名
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)
継承値bolderlighter
100400100
200400100
300400100
400700100
500700100
600900400
700900400
800900700
900900700
-

可変フォント

- -

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

- -

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;
-}
-
+### 一般的な太さ名との対応 - +TrueType や OpenType の可変フォントでは、 "wght" バリエーションが様々な幅を実装するために使用されます。 -

JavaScript

+以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。 -
let weightLabel = document.querySelector('label[for="weight"]');
-let weightInput = document.querySelector('#weight');
-let sampleText = document.querySelector('.sample');
+{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}}
 
-function update() {
-  weightLabel.textContent = `font-weight: ${weightInput.value};`;
-  sampleText.style.fontWeight = weightInput.value;
-}
+## アクセシビリティの考慮
 
-weightInput.addEventListener('input', update);
+弱視の人は、 `font-weight` の値が `100` (Thin/Hairline) または `200` (Extra Light) の場合、特にフォントの[コントラスト比が低い場合](/ja/docs/Web/CSS/color#accessibility_concerns)は、テキストを読むのが難しくなることがあります。
 
-update();
-
-
+- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html) -

アクセシビリティの考慮

+## 公式定義 -

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

+{{cssinfo}} - - -

公式定義

- -

{{cssinfo}}

- -

形式文法

+## 形式定義 {{csssyntax}} -

例

+## 例 -

Setting font weights

+

フォントの太さの設定

-

HTML

+#### HTML -
<p>
+```html
+

   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>
-
+
I'm heavy
+ I'm lighter +
+``` -

CSS

+#### CSS -
/* 段落のテキストを太字にします */
+```css
+/* 段落のテキストを太字にします */
 p {
   font-weight: bold;
 }
@@ -349,46 +220,23 @@ div {
    1 段階細くします */
 span {
   font-weight: lighter;
-}
+} +``` -

結果

+#### 結果 -

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

+{{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')}}初回定義
+{{Specifications}} + +## ブラウザーの互換性 + +{{Compat}} -

ブラウザーの互換性

+## 関連情報 -

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

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