CSS辞典 font-stretchプロパティの解説

フォントの幅を指定する「font-stretchプロパティ」の使用方法を掲載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera

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ブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera