# font-weight

> フォントの太さを指定するプロパティです。100から900までの数値、またはnormal、bold、lighter、bolderなどのキーワードで指定できます。可読性やデザイン上の強調表現に重要な役割を果たします。

- カテゴリ: テキスト・フォント
- URL: https://www.css-dictionary.com/property/font-weight/

## 構文

```css
font-weight: normal | bold | bolder | lighter | <number>
```

## Tailwindでは

- `font-normal` → font-weight: 400
- `font-semibold` → font-weight: 600
- `font-bold` → font-weight: 700
- 一般形: `font-{weight}`
- 任意値: `font-[350]`

## ブラウザ対応

- Baseline 広く利用可能
- Chrome 2+ / Firefox 1+ / Safari 1+ / Edge 12+

## コード例

### 例1: 通常の太さ（normalと同じ）

```css
font-weight: 400;
```

### 例2: 太字（boldと同じ）

```css
font-weight: 700;
```

### 例3: 細字（light）

```css
font-weight: 300;
```

## TIPS

数値指定（100-900）の方が細かい制御が可能。Webフォントでは対応する太さのみ有効。

## AIがよく間違えるポイント

指定したウェイトがフォントに存在しない場合、ブラウザが機械的に太らせる「合成ボールド」になり、特に日本語フォントでは著しく汚くなります。AIはWebフォントの読み込みウェイトと指定ウェイトの対応を確認しないことが多いので、使うウェイトを読み込んでいるかをセットで確認してください。可変フォントなら100〜900の任意値が使えます。

## AIへの依頼文例

- このサイトで使っているfont-weightの値と、Webフォントで読み込んでいるウェイトの対応を監査して

## 関連プロパティ

- [font-size](https://www.css-dictionary.com/property/font-size.md)