path: root/files/ja/web/css/font-weight/index.html

---
title: font-weight
slug: Web/CSS/font-weight
tags:
  - CSS
  - CSS Fonts
  - CSS Property
  - Reference
  - 'recipe:css-property'
translation_of: Web/CSS/font-weight
---
<div>{{CSSRef}}</div>

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

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

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush:css no-line-numbers notranslate">/* キーワード値 */
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;
</pre>

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

<h3 id="Values" name="Values">値</h3>

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

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

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

<h3 id="Fallback_weights" name="Fallback_weights">太さのフォールバック</h3>

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

<ul>
 <li>対象となる太さがが <code>400</code>～<code>500</code> で指定された場合

  <ul>
   <li>利用できる太さを、対象値から <code>500</code> までの間で昇順で探します。</li>
   <li>一致するものがなければ、対象値未満の利用できる太さを降順で探します。</li>
   <li>一致するものがなければ、 <code>500</code> より大きい太さを昇順で探します。</li>
  </ul>
 </li>
 <li>太さが <code>400</code> 未満で指定された場合、対象値以下の太さを降順で探します。一致するものがなければ、対象値より大きい太さを昇順で探します。</li>
 <li>太さが <code>500</code> より大きく指定された場合、対象値以上の太さを昇順で探します。一致するものがなければ、対象値より小さい太さを降順で探します。</li>
</ul>

<h3 id="Meaning_of_relative_weights" name="Meaning_of_relative_weights">相対的な太さの意味</h3>

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

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

<table class="standard-table">
 <thead>
  <tr>
   <th>継承値</th>
   <th><code>bolder</code></th>
   <th><code>lighter</code></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>100</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>200</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>300</th>
   <td>400</td>
   <td>100</td>
  </tr>
  <tr>
   <th>400</th>
   <td>700</td>
   <td>100</td>
  </tr>
  <tr>
   <th>500</th>
   <td>700</td>
   <td>100</td>
  </tr>
  <tr>
   <th>600</th>
   <td>900</td>
   <td>400</td>
  </tr>
  <tr>
   <th>700</th>
   <td>900</td>
   <td>400</td>
  </tr>
  <tr>
   <th>800</th>
   <td>900</td>
   <td>700</td>
  </tr>
  <tr>
   <th>900</th>
   <td>900</td>
   <td>700</td>
  </tr>
 </tbody>
</table>

<h3 id="Common_weight_name_mapping" name="Common_weight_name_mapping">一般的な太さ名との対応</h3>

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

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">値</th>
   <th scope="col">太さ名</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>100</td>
   <td>Thin (Hairline)</td>
  </tr>
  <tr>
   <td>200</td>
   <td>Extra Light (Ultra Light)</td>
  </tr>
  <tr>
   <td>300</td>
   <td>Light</td>
  </tr>
  <tr>
   <td>400</td>
   <td>Normal (Regular)</td>
  </tr>
  <tr>
   <td>500</td>
   <td>Medium</td>
  </tr>
  <tr>
   <td>600</td>
   <td>Semi Bold (Demi Bold)</td>
  </tr>
  <tr>
   <td>700</td>
   <td>Bold</td>
  </tr>
  <tr>
   <td>800</td>
   <td>Extra Bold (Ultra Bold)</td>
  </tr>
  <tr>
   <td>900</td>
   <td>Black (Heavy)</td>
  </tr>
  <tr>
   <td>950</td>
   <td><a href="https://docs.microsoft.com/en-us/dotnet/api/system.windows.fontweights?view=netframework-4.8#remarks">Extra Black (Ultra Black)</a></td>
  </tr>
 </tbody>
</table>

<h3 id="Variable_fonts" name="Variable_fonts">可変フォント</h3>

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

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

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

<div style="border: 10px solid #f5f9fa; padding: 1rem;">{{EmbedLiveSample("variable-font-example", 1200, 180, "", "", "example-outcome-frame")}}</div>

<h4 id="HTML">HTML</h4>

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

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">/*
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;
}
</pre>

<div class="hidden">
<pre class="brush: css notranslate">html, body {
  max-height: 100vh;
  max-width: 100vw;
  overflow: hidden;
}

body {
  display: flex;
  flex-direction: column;
}

header {
  margin-bottom: 1.5rem;
}

.container {
  flex-grow: 1;
}

.container &gt; p {
  margin-top: 0;
  margin-bottom: 0;
}
</pre>
</div>

<h4 id="JavaScript">JavaScript</h4>

<pre class="brush: js notranslate">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();
</pre>
</div>

<h2 id="Accessibility_concerns" name="Accessibility_concerns">アクセシビリティの考慮</h2>

<p>弱視の人は、 <code>font-weight</code> の値が <code>100</code> (Thin/Hairline) または <code>200</code> (Extra Light) の場合、特にフォントの<a href="/en-US/docs/Web/CSS/color#Accessibility_concerns">コントラスト比が低い場合</a>は、テキストを読むのが難しくなることがあります。</p>

<ul>
 <li><a href="/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">MDN "WCAG を理解する ― ガイドライン 1.4 の解説"</a></li>
 <li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html" rel="noopener">Understanding Success Criterion 1.4.8 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formal_definition" name="Formal_definition">公式定義</h2>

<p>{{cssinfo}}</p>

<h2 id="Formal_syntax" name="Formal_syntax">形式文法</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="Examples" name="Examples">例</h2>

<h3 id="Setting_font_weights">Setting font weights</h3>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;
  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?"
&lt;/p&gt;

&lt;div&gt;I'm heavy&lt;br/&gt;
  &lt;span&gt;I'm lighter&lt;/span&gt;
&lt;/div&gt;
</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush:css notranslate">/* 段落のテキストを太字にします */
p {
  font-weight: bold;
}

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

/* span 要素のテキストの太さを親要素より
   1 段階細くします */
span {
  font-weight: lighter;
}</pre>

<h4 id="Result" name="Result">結果</h4>

<p>{{EmbedLiveSample("Setting_font_weights","400","300")}}</p>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Fonts', '#font-weight-prop', 'font-weight')}}</td>
   <td>{{Spec2('CSS4 Fonts')}}</td>
   <td><code>font-weight</code> で 1～1000 の任意の数を受け付けるよう定義。</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Fonts', '#font-weight-prop', 'font-weight')}}</td>
   <td>{{Spec2('CSS3 Fonts')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'fonts.html#propdef-font-weight', 'font-weight')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>変更なし</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#font-weight', 'font-weight')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.font-weight")}}</p>