font-stretch:表示させるフォントの幅広や幅狭のフェイスを指定する
初期値 | auto |
適用対象 | 全ての要素、::first-letter および::first-line |
継承 | する |
アニメーション | 文字の伸長値 |
対応ブラウザ | caniuseで確認 |
font-stretchプロパティの説明
font-stretch
は、表示させるフォントの幅広や幅狭のフェイスを指定します。フォントには複数の文字セットが含まれており、通常よりも幅の広い(expanded)フェイスや幅の狭い(condensed)フェイスを選択できます。
font-stretchに指定できる値
- normal
- 通常の幅を持つフォントフェイスです。これが初期値です。
- condensed値
- 通常よりも幅の狭いフォントフェイスです。以下のようなバリエーションがあります。
semi-condensed
:やや幅が狭いcondensed
:幅が狭いextra-condensed
:かなり幅が狭いultra-condensed
:とても幅が狭い
- expanded値
- 通常よりも幅の広いフォントフェイスです。以下のようなバリエーションがあります。
semi-expanded
:やや幅が広いexpanded
:幅が広いextra-expanded
:かなり幅が広いultra-expanded
:とても幅が広い
- <percentage>
- CSSで使用できる割合を示す値です。通常のフォントフェイスを基準に相対的な幅を示します。負の値は扱えません。
キーワードと割合の対応表
font-stretch
のキーワード値と割合には以下の相関関係があります。
キーワード | 割合 |
---|---|
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% |
font-stretchの使い方とサンプル
font-stretch
プロパティの構文は以下の通りです。
CSS
/* キーワード値 */
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: 50%;
font-stretch: 75%;
font-stretch: 125%;
/* グローバル値 */
font-stretch: inherit;
font-stretch: initial;
font-stretch: revert;
font-stretch: unset;
font-stretchの実例
それでは実際にfont-stretch
プロパティの書き方を見ていきましょう。以下の例は、キーワード値の変化の度合いを比較するものです。可変フォントであれば横幅の違いが明確に表示されます。この内容を参考にフォントの種類を変えてみて下さい。
表示確認
CSS
.samp_box {
width: 100%;
margin-top: 1rem;
padding: 10px;
background: #eee;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
gap: 10px;
}
.samp_box div {
padding: 10px;
background: #fff;
text-align: center;
}
div span {
display: block;
font-size: 2rem;
}
.fs_uc {
grid-column: 1/2;
grid-row: 1/2;
}.fs_uc > span {font-stretch: ultra-condensed;}
.fs_ec {
grid-column: 2/3;
grid-row: 1/2;
}.fs_ec > span {font-stretch: extra-condensed;}
.fs_c {
font-stretch: condensed;
grid-column: 3/4;
grid-row: 1/2;
}.fs_c > span {font-stretch: condensed;}
.fs_sc {
grid-column: 4/5;
grid-row: 1/2;
}.fs_sc > span {font-stretch: semi-condensed;}
.fs_n {
grid-column: 1/5;
grid-row: 2/3;
}.fs_n > span {font-stretch: normal;}
.fs_se {
grid-column: 1/2;
grid-row: 3/4;
}.fs_se > span {font-stretch: semi-expanded;}
.fs_e {
grid-column: 2/3;
grid-row: 3/4;
}.fs_e > span {font-stretch: expanded;}
.fs_ee {
grid-column: 3/4;
grid-row: 3/4;
}.fs_ee > span {font-stretch: extra-expanded;}
.fs_ue {
grid-column: 4/5;
grid-row: 3/4;
}.fs_ue > span {font-stretch: ultra-expanded;}
HTML
<section class="samp_box">
<div class="fs_uc">ultra-condensed<span>e</span></div>
<div class="fs_ec">extra-condensed<span>e</span></div>
<div class="fs_c">condensed<span>e</span></div>
<div class="fs_sc">semi-condensed<span>e</span></div>
<div class="fs_n">normal<span>e</span></div>
<div class="fs_se">semi-expanded<span>e</span></div>
<div class="fs_e">expanded<span>e</span></div>
<div class="fs_ee">extra-expanded<span>e</span></div>
<div class="fs_ue">ultra-expanded<span>e</span></div>
</section>
font-stretchに関連するCSSプロパティ
フォント・文字色 | |
---|---|
color | 文字の色を指定する |
font | フォントに関する様々な機能を一括で指定する |
font-family | 文字フォントの種類を指定する |
font-feature-settings | OpenTypeフォントの拡張書体の特性を制御する |
font-kerning | フォントの文字詰め(カーニング)を制御する |
font-language-override | 文字を表示する祭に使用する言語情報を一時的に変更する |
font-size | 文字フォントの大きさを指定する |
font-size-adjust | 現在のフォントサイズを基準に小文字の大きさを相対的に調整する |
font-stretch | 表示させるフォントの幅広や幅狭のフェイスを指定する |
font-style | フォントを筆記体や斜体で表示するかどうかを指定する |
font-synthesis | 太字や斜体に対応していないフォントの加工を制御する |
font-variant | フォントの表示形式やブラウザの合成規則を一括で指定する |
font-variant-alternates | 文字フォントの代替字体(グリフ)の選定を制御する |
font-variant-caps | 文字列に適用されるキャピタライゼーションルールを制御する |
font-variant-east-asian | 東アジアの言語で使われる字体を制御する |
font-variant-ligatures | 隣り合った文字フォントの合字(リガチャ)を制御する |
font-variant-numeric | 数値に関する文字表記を制御する |
font-variant-position | 上付き文字や下付き文字として配置されるべき字体の使用を制御する |
font-weight | 文字フォントの太さを指定する |