Skip to content

Commit

Permalink
2024/08/09 時点の英語版に基づき更新 (#23866)
Browse files Browse the repository at this point in the history 
* 2024/08/09 時点の英語版に基づき更新

* Update files/ja/web/css/font-weight/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* Update files/ja/web/css/font-weight/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
  • Loading branch information
@mfuji09 @github-actions
mfuji09 and github-actions[bot] authored Oct 5, 2024
1 parent 917253d commit 3be677d
Showing 1 changed file with 49 additions and 37 deletions.
86 changes: 49 additions & 37 deletions files/ja/web/css/font-weight/index.md
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,68 @@
---
title: font-weight
slug: Web/CSS/font-weight
l10n:
sourceCommit: 4ecbac9e89961a132c1e7f5493ec94f60dcb1ee4
---

{{CSSRef}}

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

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

## 構文

```css
/* キーワード値 */
/* <font-weight-absolute> キーワード値 */
font-weight: normal;
font-weight: bold;

/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;

/* 数値のキーワード値 */
/* <font-weight-absolute> 数値のキーワード値 [1,1000] */
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;// normal
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700;// bold
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

/* 親要素に対して相対的なキーワード値 */
font-weight: lighter;
font-weight: bolder;

/* グローバル値 */
font-weight: inherit;
font-weight: initial;
font-weight: revert;
font-weight: revert-layer;
font-weight: unset;
```

`font-weight` プロパティは、以下の一覧から選択した単一のキーワードで指定します。
`font-weight` プロパティは、`<font-weight-absolute>` 値または以下の一覧にある相対的な太さの値で指定します。

### 値

- `normal`

- : 通常のフォントの太さです。 `400` と同じです。

- `bold`

- : 太字のフォントの太さです。 `700` と同じです。
- `lighter`
- : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#meaning_of_relative_weights)を参照してください。
- `bolder`
- : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#meaning_of_relative_weights)を参照してください。

- `<number>`
- : 1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さいものより太さが太い (または等しい) ことを表します。よく使用される値は、以下の[一般的な太さ名との対応](#一般的な太さ名との対応)にあるように、共通の太さ名に対応しています。

`font-weight` 仕様書の古いバージョンでは、このプロパティはキーワード値と数値 100, 200, 300, 400, 500, 600, 700, 800, 900 のみを受け付けていました。可変フォント以外では実際にはこれらのセット値しか利用できません。ただし、可変フォント以外では細かい値 (例えば 451) は[太さの代替](#太さの代替)の仕組みを用いて、これらの値のいずれかに変換されます。
- : 1 以上 1000 以下の {{cssxref("&lt;number&gt;")}} 値です。数値が大きいと、数値が小さいものより太さが太い（または等しい）ことを表します。これにより、[可変フォント](#可変フォント)をきめ細かく制御することができます。可変フォントではない場合、指定した通りの太さが利用できない場合は、[太さの代替](#太さの代替)アルゴリズムが使用されます。100 で割り切れる数値は、下記の[一般的な太さ名との対応](#一般的な太さ名との対応)の節で説明されている一般的な太さ名に対応しています。

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

- : フォントの太さが親要素よりも相対的に 1 つ細くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#相対的な太さの意味)を参照してください。

- `bolder`
- : フォントの太さが親要素よりも相対的に1つ太くなります。相対的な太さの計算に考慮されるフォントの太さは 4 つのみであることに注意してください。下記の[相対的な太さの意味](#相対的な太さの意味)を参照してください。

### 太さの代替

Expand All @@ -68,13 +75,17 @@ CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任
- 一致するものがなければ、 `500` より大きい太さを昇順で探します。

- 太さが `400` 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。

- 太さが `500` より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。

> [!NOTE]
> 代替のウェイトアルゴリズムはレンダリングだけに使用されます。プロパティの計算値は指定値のままです。

### 相対的な太さの意味

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

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

<table class="standard-table">
<thead>
Expand Down Expand Up @@ -135,34 +146,34 @@ CSS Fonts レベル 4 では、構文を拡張して 1 から 1000 までの任

### 一般的な太さ名との対応

`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://docs.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。

| 値 | 太さ名 |
| --- | --------------------------------------------------------------------------------------------------------------------------------- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | [Extra Black (Ultra Black)](https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |
`100` から `900` の数値は、おおよそ以下の太さ名に対応します ([OpenType 仕様書](https://learn.microsoft.com/en-us/typography/opentype/spec/os2#usweightclass)を参照してください)。

| 値 | 太さ名 |
| --- | ---------------------------------------------------------------------------------------------------------------------------------- |
| 100 | Thin (Hairline) |
| 200 | Extra Light (Ultra Light) |
| 300 | Light |
| 400 | Normal (Regular) |
| 500 | Medium |
| 600 | Semi Bold (Demi Bold) |
| 700 | Bold |
| 800 | Extra Bold (Ultra Bold) |
| 900 | Black (Heavy) |
| 950 | [Extra Black (Ultra Black)](https://learn.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks) |

### 可変フォント

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

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

以下の例を動作させるには、 CSS Fonts Level 4 の font-weight が 1～1000 の任意の数を取れる構文に対応したブラウザーが必要です。
このデモでは、`font-weight: 500;` を設定して読み込みます。 `font-weight` プロパティの値を変更すると、テキストの太さが変わります。

{{EmbedGHLiveSample("css-examples/variable-fonts/font-weight.html", '100%', 860)}}

## アクセシビリティの考慮
## アクセシビリティ

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

- [MDN "WCAG を理解する ― ガイドライン 1.4 の解説"](/ja/docs/Web/Accessibility/Understanding_WCAG/Perceivable#ガイドライン_1.4_前景と背景の区別を含め、ユーザーがコンテンツを見たり聞いたりしやすくする)
- [Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html)
Expand Down Expand Up @@ -230,6 +241,7 @@ span {

## 関連情報

- {{cssxref("font-style")}}
- {{cssxref("font-family")}}
- {{cssxref("font-style")}}
- [基本的なテキストとフォントの装飾](/ja/docs/Learn/CSS/Styling_text/Fundamentals)
- [CSS フォント](/ja/docs/Web/CSS/CSS_fonts)モジュール

0 comments on commit 3be677d

Please sign in to comment.