フォントファミリーの幅を指定する

CSS - font-stretch

概要

CSSプロパティ｢font-stretch｣は、フォントの幅を指定する際に使用します。

まず、このプロパティの効果を得るには、指定しているフォントが、いくつかのパターンのフェイスを用意していることが前提です。それらがあるフォントの場合は、指定した値に一番近いものが選択されます。一方、パターンのないフォントの場合は、指定しても表示の変化はありません。

<p class="font-stretch">フォントストレッチを指定します</p>
<style>
.font-stretch {
  font-stretch: expanded;
}
</style>

値の指定方法

{ font-stretch: 値}
値説明
ultra-expandedもっとも幅の広いフォント表示
extra-expandedより幅の広いフォント表示
expanded幅の広いフォント表示
semi-expandedやや幅の広いフォント表示
normal初期値です。通常の幅表示
semi-condensedやや幅の狭いフォント表示
condensed幅の狭いフォント表示
extra-condensedかなり幅の狭いフォント表示
ultra-condensedもっとも幅の狭いフォント表示

プロパティの種類について

｢font｣プロパティで指定できるそれぞれの値の一覧です。詳細は各ページを参照してみてください。

プロパティ名説明
fontフォントに関する指定をまとめて行うショートハンドプロパティ
font-styleフォントのスタイルを指定する
font-variantフォントのスモールキャップ指定する
font-weightフォントの太さを指定する
font-sizeフォントのサイズを指定する
font-familyフォントの種類を指定する
font-size-adjustフォントのサイズを調整する
font-stretchフォントを縦長・横長にする

使用例

<p>firefoxブラウザなどで変化がみられます</p>
<p>ABCDEFGHIJK</p>
<p class="ultra-condensed">ABCDEFGHIJK</p>
<p class="condensed">ABCDEFGHIJK</p>
<p class="font-stretch">ABCDEFGHIJK</p>
<p class="ultra-expanded">ABCDEFGHIJK</p>
<style>
p {
  font-family: 'Helvetica Neue', 'Helvetica', 'sans-serif';
}
.ultra-condensed {
  font-stretch: ultra-condensed;
}
.condensed {
  font-stretch: condensed;
}
.expanded {
  font-stretch: expanded;
}
.ultra-expanded {
  font-stretch: ultra-expanded;
}
</style>

仕様書

関連CSSプロパティ