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

---
title: font-stretch
slug: Web/CSS/font-stretch
tags:
  - CSS
  - CSS フォント
  - CSS プロパティ
  - リファレンス
translation_of: Web/CSS/font-stretch
---
<div>{{CSSRef}}</div>

<p><span class="seoSummary"><code>font-stretch</code> CSS プロパティは、フォントの normal, condensed, expanded のフェイスを選択します。</span></p>

<pre class="brush:css no-line-numbers">/* キーワード値 */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* パーセント値 */
font-stretch: 0%;
font-stretch: 50%;
font-stretch: 200%;

/* グローバル値 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;
</pre>

<p>フォントファミリによっては追加のフェイスを提供しており、通常より狭い文字、 (<em>condensed</em> フェイス)、通常より広い文字 (<em>expanded</em> フェイス) などがあります。</p>

<p><code>font-stretch</code> を使うと、そのようなフォントで condensed や expanded フェイスを選択することができます。使用しているフォントが condensed や expanded フェイスを提供していない場合は、このプロパティは効果がありません。</p>

<p>一部のサンプルフォントでこのプロパティの効果を見るには、以下の<a href="#Font_face_selection">フォントフェイスの選択</a>をご覧ください。</p>

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

<p>このプロパティは、単一のキーワード値又は単一の {{cssxref("&lt;percentage&gt;")}} 値として指定することができます。</p>

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

<dl>
 <dt><code>normal</code></dt>
 <dd>通常のフォントフェイスを指定します。</dd>
 <dt><code>semi-condensed</code>, <code>condensed</code>, <code>extra-condensed</code>, <code>ultra-condensed</code></dt>
 <dd>通常より幅の狭い (condensed) フォントフェイスを指定します。最も幅の狭いフェイスは ultra-condensed です。</dd>
 <dt><code>semi-expanded</code>, <code>expanded</code>, <code>extra-expanded</code>, <code>ultra-expanded</code></dt>
 <dd>通常より幅の広い (expanded) フォントフェイスを指定します。最も幅の広いフェイスは ultra-expanded です。</dd>
 <dt><code>&lt;percentage&gt;</code></dt>
 <dd>{{cssxref("&lt;percentage&gt;")}} 値です。このプロパティでは負の数は許可されていません。</dd>
</dl>

<p><code>font-stretch</code> の古いバージョンの仕様書では、このプロパティは9つのキーワード値のみを受け付けていました。 CSS Fonts Level 4 で、構文が <code>&lt;percentage&gt;</code> を受け付けるように拡張されました。これによって、文字幅がもっと連続的になるように提供することができます。 TrueType や OpenType のフォントでは、 "wdth" バリエーションが様々な幅を実装するために使用されます。</p>

<p>但し、 <code>&lt;percentage&gt;</code> の構文はまた、すべてのブラウザーが対応しているわけではありません。詳しくは <a href="#Browser_compatibility">Browser compatibility</a> をご覧ください。</p>

<h3 id="Keyword_to_numeric_mapping" name="Keyword_to_numeric_mapping">キーワードと数値の対応</h3>

<p>以下の表は、キーワード値とパーセントの数値の間の対応を示しています。</p>

<table class="fullwidth-table standard-table">
 <thead>
  <tr>
   <th scope="col">キーワード</th>
   <th scope="col">パーセント値</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>ultra-condensed</code></td>
   <td>50%</td>
  </tr>
  <tr>
   <td><code>extra-condensed</code></td>
   <td>62.5%</td>
  </tr>
  <tr>
   <td><code>condensed</code></td>
   <td>75%</td>
  </tr>
  <tr>
   <td><code>semi-condensed</code></td>
   <td>87.5%</td>
  </tr>
  <tr>
   <td><code>normal</code></td>
   <td>100%</td>
  </tr>
  <tr>
   <td><code>semi-expanded</code></td>
   <td>112.5%</td>
  </tr>
  <tr>
   <td><code>expanded</code></td>
   <td>125%</td>
  </tr>
  <tr>
   <td><code>extra-expanded</code></td>
   <td>150%</td>
  </tr>
  <tr>
   <td><code>ultra-expanded</code></td>
   <td>200%</td>
  </tr>
 </tbody>
</table>

<h3 id="Font_face_selection" name="Font_face_selection">フォントフェイスの選択</h3>

<p><code>font-stretch</code> で与えられた値で選択されるフェイスは、フォントがそのフェイスに対応しているかによります。与えられた値に正確に一致するフェイスがフォントに存在しない場合、値が100%よりも小さい場合はより狭いフェイスが割り当てられ、100%と等しいか大きい場合はより広いフェイスが割り当てられます。</p>

<p>以下の表は二つの異なるフォントにおいて、 <code>font-stretch</code> に様々なパーセント値を提供した場合の効果を示しています。</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row"> </th>
   <th scope="col">50%</th>
   <th scope="col">62.5%</th>
   <th scope="col">75%</th>
   <th scope="col">87.5%</th>
   <th scope="col">100%</th>
   <th scope="col">112.5%</th>
   <th scope="col">125%</th>
   <th scope="col">150%</th>
   <th scope="col">200%</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row">Helvetica Neue</th>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16039/Screenshot_2018-06-06_example_page.png" style="height: 59px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16040/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
  </tr>
  <tr>
   <th scope="row">League Mono Variable</th>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16030/Screenshot_2018-06-06_example_page.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16031/Screenshot_2018-06-06_example_page1.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16032/Screenshot_2018-06-06_example_page2.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16033/Screenshot_2018-06-06_example_page3.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16034/l-100.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16035/l-112.5.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16036/l-125.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16037/l-150.png" style="height: 58px; width: 45px;"></td>
   <td><img alt="" src="https://mdn.mozillademos.org/files/16038/l-200.png" style="height: 58px; width: 45px;"></td>
  </tr>
 </tbody>
</table>

<ul>
 <li>Helvetica Neue は、既定で macOS にインストールされているもので、普通のフェイスに加えて一つの condensed のフェイスを持ちます。 <code>font-stretch</code> の100%より小さいすべての値は condensed のフェイスを選択し、それ以外の値は normal のフェイスを選択します。</li>
 <li><a href="http://tylerfinck.com/leaguemonovariable/">League Mono Variable</a> は、 <code>font-stretch</code> のさまざまなパーセント値に対して、幅の連続的な範囲のようなものを提供する可変フォントです。</li>
</ul>

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

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

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

<h3 id="Percentage_syntax" name="Percentage_syntax">パーセント値の構文</h3>

<p>なお、この例は <code>&lt;percentage&gt;</code> 値に対応したブラウザーのみで動作します。</p>

<div id="variable-font-demo">
<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;div class="container"&gt;
    &lt;p class="condensed"&gt;an elephantine lizard&lt;/p&gt;
    &lt;p class="normal"&gt;an elephantine lizard&lt;/p&gt;
    &lt;p class="expanded"&gt;an elephantine lizard&lt;/p&gt;
&lt;/div&gt;
</pre>

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

<pre class="brush: css">/*
This example uses the League Mono Variable font, developed by
Tyler Finck (https://www.tylerfinck.com/) and used here under
the terms of the SIL Open Font License, Version 1.1:
http://scripts.sil.org/cms/scripts/page.php?item_id=OFL_web
*/

@font-face {
  src: url('https://mdn.mozillademos.org/files/16014/LeagueMonoVariable.ttf');
  font-family:'LeagueMonoVariable';
  font-style: normal;
}

.container {
  border: 10px solid #f5f9fa;
  padding: 0 1rem;
  font: 1.5rem 'LeagueMonoVariable', sans-serif;
}

.condensed {
  font-stretch: 50%;
}

.normal {
  font-stretch: 100%;
}

.expanded {
  font-stretch: 200%;
}

</pre>
</div>

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

<p>{{EmbedLiveSample("variable-font-demo", 1200, 250, "", "", "example-outcome-frame")}}</p>

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

<table class="standard-table">
 <thead>
  <tr>
   <th>仕様書</th>
   <th>状況</th>
   <th>備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
   <td>{{ Spec2('CSS4 Fonts') }}</td>
   <td>可変フォントに <code>&lt;percentage&gt;</code> の構文を追加。</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Fonts', '#propdef-font-stretch', 'font-stretch') }}</td>
   <td>{{ Spec2('CSS3 Fonts') }}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<div class="note">
<p>CSS プロパティ <code>font-stretch</code> は初め CSS 2 で定義されましたが、CSS 2.1 で実装経験不足のため外されました。CSS 3 では新しく定義されました。</p>
</div>

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

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>

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

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