CSSのfont-stretchでフォントの幅を調整する方法をわかりやすく解説

2024.09.15
スポンサーリンク

font-stretchプロパティは、フォントの幅を調整して、テキストの見た目を変えるために使用されます。通常はフォント自体に特定の幅のバリエーションが含まれており、このプロパティによってその幅を変更できます。

スポンサーリンク

font-stretchの値とその効果の一覧

  • normal: デフォルト値。通常のフォント幅です。
  • condensed: フォント幅を縮小します。
  • expanded: フォント幅を拡大します。
  • ultra-condensed: フォント幅を極限まで縮小します。
  • ultra-expanded: フォント幅を極限まで拡大します。

注意点と関連情報

font-stretchプロパティは、使用するフォントが異なる幅のバリエーションをサポートしている場合にのみ機能します。すべてのフォントがこの機能を持っているわけではないため、特定のフォントに依存することに注意してください。

font-stretchプロパティが効かない時の原因と対策

フォントが異なる幅のスタイルをサポートしていない

font-stretchプロパティは、フォントが異なる幅（狭い、広いなど）のバリエーションをサポートしている場合にのみ機能します。多くのフォントは、異なる幅のスタイルをサポートしていないため、このプロパティが効果を発揮しません。
対策: 使用しているフォントがfont-stretchプロパティをサポートしているか確認しましょう。サポートされていないフォントでは、別のフォントを選ぶか、フォールバックを指定して、異なる幅のスタイルを持つフォントを使用してください。

フォントがすでにデフォルトの幅で表示されている

font-stretchプロパティを適用しても、指定されたフォントがデフォルトで既に指定された幅（例: normalやcondensedなど）に対応している場合、視覚的な変化が確認できないことがあります。
対策: 他の幅のスタイルが確認できるフォントや異なる幅のバリエーションがあるフォントでテストしてみてください。フォントによっては、幅の違いが視覚的にほとんど確認できないこともあります。

font-familyのサポート

font-stretchは、font-familyプロパティで指定されたフォントに適用されますが、font-familyで指定されたフォントが幅の異なるバリエーションをサポートしていない場合、font-stretchは効果を発揮しません。
対策: font-familyで指定されたフォントがfont-stretchをサポートしているか確認し、サポートされていない場合は、幅の異なるバリエーションを持つフォントを指定するか、フォールバックとして適切なフォントを追加してください。

共通するCSSコード

.css-sample-container {
  padding: 20px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  width: 300px;
  background-color: #f9f9f9;
  text-align: center;
}

.css-sample-text {
  font-family: 'Arial', sans-serif;
  font-size: 20px;
}

font-stretch: normal

通常のフォント幅の例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-stretch-normal">Sample Text</p>
</div>

CSSコード

.css-sample-stretch-normal {
  font-stretch: normal;
}

表示結果

Sample Text

font-stretch: condensed

フォント幅を縮小した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-stretch-condensed">Sample Text</p>
</div>

CSSコード

.css-sample-stretch-condensed {
  font-stretch: condensed;
}

表示結果

Sample Text

font-stretch: expanded

フォント幅を拡大した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-stretch-expanded">Sample Text</p>
</div>

CSSコード

.css-sample-stretch-expanded {
  font-stretch: expanded;
}

表示結果

Sample Text

font-stretch: ultra-condensed

フォント幅を極限まで縮小した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-stretch-ultra-condensed">Sample Text</p>
</div>

CSSコード

.css-sample-stretch-ultra-condensed {
  font-stretch: ultra-condensed;
}

表示結果

Sample Text

font-stretch: ultra-expanded

フォント幅を極限まで拡大した例です。

HTMLコード

<div class="css-sample-container">
  <p class="css-sample-text css-sample-stretch-ultra-expanded">Sample Text</p>
</div>

CSSコード

.css-sample-stretch-ultra-expanded {
  font-stretch: ultra-expanded;
}

表示結果

Sample Text

まとめ

  • font-stretchプロパティは、フォントの幅を調整して視覚的な効果を変えるために使用されます。
  • 値には、normal、condensed、expanded、ultra-condensed、ultra-expandedなどがあり、フォント幅の拡大や縮小が可能です。
  • このプロパティを利用するには、使用するフォントが幅のバリエーションをサポートしている必要があります。
スポンサーリンク