CSS辞典 font-stretchプロパティの解説
フォントの幅を指定する「font-stretchプロパティ」の使用方法を掲載
CSS3／2.1
対応ブラウザ
font-stretchプロパティ（フォントの幅を指定）
| 初期値 | normal |
| 適用される要素 | すべての要素 |
| モジュール | CSS Fonts Module Level3及びLevel4 |
| 継承 | あり |
概要・使用方法
{font-stretch: 幅;}font-stretchプロパティは、フォントの幅を指定します。幅の種類が用意されたフォントの場合、指定した幅、またはもっとも近い幅で表示されます。幅の種類がないフォントの場合は表示は変更されません。
| %値 | %値で指定します。値は文字の幅に対する割合になります。 ※CSS4で追加 |
| ultra-expanded | 最も広い幅のフォントで表示 |
| extra-expanded | かなり広い幅のフォントで表示 |
| expanded | 広い幅のフォントで表示 |
| semi-expanded | やや広い幅のフォントで表示 |
| normal | 通常の幅のフォントで表示 |
| semi-condensed | やや狭い幅のフォントで表示 |
| condensed | 狭い幅のフォントで表示 |
| extra-condensed | かなり狭い幅のフォントで表示 |
| ultra-condensed | もっとも狭い幅のフォントで表示 |
サンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<title>font-stretch CSSフォントサンプルページ</title>
<meta charset="uft-8">
<style>
html{
/* 全体のフォントは明朝系 */
font-family: "Arial",serif;
}
/* フォントを個別指定 */
.fonttype1{font-stretch:condensed;}
.fonttype2{font-stretch:expanded;}
</style>
</head>
<body>
<p class="fonttype1">condensed</p>
<p class="fonttype2">condensed</p>
</body>
</html>実行結果
condensed
condensed
chromeブラウザ実行結果
Firefox ブラウザ実行結果
edgeブラウザ実行結果
operaブラウザ実行結果
