最終更新日:
公開日:
リファレンス
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
こちらの記事は役に立ちましたか?
コメントありがとうございます!
運営の参考にさせていただきます。
ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。