HTML & CSS

最終更新日:
公開日:

リファレンス

CSS

フォント ストレッチ

font-stretchプロパティ

フォントの幅を指定するためのプロパティです。このプロパティを適用するには使用しているフォントが対応している必要があります。

  • 初期値

    normal

  • 継承

    継承あり

  • 適用できる要素

    全要素

次のような値を設定することができます。

  • ultra-condensed – 通常から50%の幅で表示されます。
  • extra-condensed – 通常から62.5%の幅で表示されます。
  • condensed – 通常から75%の幅で表示されます。
  • semi-condensed – 通常から87.5%の幅で表示されます。
  • normal – 初期値。通常の幅(100%)で表示されます。
  • semi-expanded – 通常から112.5%の幅で表示されます。
  • expanded – 通常から125%の幅で表示されます。
  • extra-expanded – 通常から150%の幅で表示されます。
  • ultra-expanded – 通常から200%の幅で表示されます。

パターン1

それぞれの値を指定した例です。
2018年12月現在、主要ブラウザでは表示が対応していないようです。

CSSコード例

.sample_css1 .text1 {
	font-stretch: ultra-condensed;
}
.sample_css1 .text2 {
	font-stretch: extra-condensed;
}
.sample_css1 .text3 {
	font-stretch: condensed;
}
.sample_css1 .text4 {
	font-stretch: semi-condensed;
}
.sample_css1 .text5 {
	font-stretch: normal;
}
.sample_css1 .text6 {
	font-stretch: semi-expanded;
}
.sample_css1 .text7 {
	font-stretch: expanded;
}
.sample_css1 .text8 {
	font-stretch: extra-expanded;
}
.sample_css1 .text9 {
	font-stretch: ultra-expanded;
}

表示例:

テキストサンプル:ultra-condensed

テキストサンプル:extra-condensed

テキストサンプル:condensed

テキストサンプル:semi-condensed

テキストサンプル:normal

テキストサンプル:semi-expanded

テキストサンプル:expanded

テキストサンプル:extra-expanded

テキストサンプル:ultra-expanded

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。