CSS辞典 フォントを指定する font、font-style、font-variantプロパティの解説

フォントのサイズ、太さ、行、高さをまとめて指定する「fontプロパティ」、フォントスタイルを指定する「font-styleプロパティ」、フォントのスモールキャップを指定する「font-variantプロパティ」の使用方法を掲載

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プロパティ(フォントのサイズ、太さ、行、高さをまとめて指定)

初期値各プロパティの初期値
適用される要素すべての要素
モジュールCSS Fonts Module Level3及びLevel4
継承あり

概要・使用方法

{font: -weight -style -font-stretch -font-variant -font-size -line-height -font-family;}

fontプロパティは、font-style、font-variant、font-weight、font-size、line-height、font-familyプロパティをまとめて設定するためのプロパティ。指定できる値は、各プロパティと同じです。

fontプロパティ指定方法
指定方法

font-size、font-familyプロパティの指定は必須です。省略したプロパティは初期値が使用されます。

font-style、font-variant、font-weightプロパティは、font-sizeプロパティよりもに指定します。ただし、font-variantプロパティに関しては、CSS2.1でサポートされている値(normal、small-caps)のみをfontプロパティで設定可能です。

line-heightプロパティは、font-sizeプロパティに続けてスラッシュ(/)の後に指定します。最後にfont-familyプロパティは必ず最後に指定します。

font-weightプロパティの解説

line-heightプロパティの解説

font-sizeプロパティの解説

font-familyプロパティの解説

サンプルソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>fontプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          html{
            /* 全体のフォントは明朝系 */
            font: italic normal bold 2em/1.5 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
          }
    </style>
  </head>
  <body>
      <p>fontプロパティを指定したフォントです</p>
  </body>
</html>

実行結果

fontプロパティを指定したフォントです

font-styleプロパティ(フォントのスタイルを指定)

初期値normal
適用される要素すべての要素
モジュールCSS Fonts Module Level3及びLevel4
継承あり

概要・使用方法

{font-style: サイズ;}

font-styleプロパティは、フォントのスタイル(イタリック体・斜体)を指定します。指定したフォントにイタリック体・斜体が無い場合が多く、その場合はフォントが傾いた状態で表示されます。(主に海外フォントで使用します。)

指定できる値

normal標準のフォントで表示されます。
italicイタリック体のフォントで表示されます。
oblique斜体のフォントで表示されます。CSS4では「oblique40deg」のように、obliqureキーワードに対して角度を指定します。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          html{
            /* 全体のフォントは明朝系 */
            font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;
          }
          
          /* フォントを個別指定 */
          .fonttype1{font-style:italic;}
          .fonttype2{font-style:oblique;}
          
    </style>
  </head>
  <body>
      <p>HTML全体のフォントです</p>
      <p class="fonttype1">italicフォントです</p>
      <p class="fonttype2">obliqueフォントです</p>
  </body>
</html>

実行結果

HTML全体のフォントです

italicフォントです

obliqueフォントです


chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera

font-variantプロパティ(フォントのスモールキャップを指定)

初期値normal
適用される要素すべての要素
モジュールCSS Fonts Module Level3
継承あり

概要・使用方法

{font-variant: スモールキャップ;}

小文字の高さに合わせて大文字をデザインした字形。フォントのスモールキャップ(小文字の大きさの大文字)を指定します。font-variantプロパティでは欧文フォントの字形を指定します。

値の指定方法

指定値意味
normal標準のフォントで表示されます。(指定しなかった場合のデフォルト)
small-caps指定した要素内にある小文字がスモールキャップのフォントで表示されます。スモールキャップのフォントがない場合は、大文字を縮小したものが表示されます。

サンプルソース

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>   
          html{font-size:200%;}
          /* フォントを個別指定 */
          .fonttype1{
                      font-variant:normal;
                    }
          .fonttype2{
                      font-variant:small-caps;
                    }
    </style>
  </head>
  <body>
      <p class="fonttype1">Html&Css</p>
      <p class="fonttype2">Html&Css</p>
  </body>
</html>

実行結果

chromeブラウザ実行結果

chrome


Firefox ブラウザ実行結果

Firefox


edgeブラウザ実行結果

edge


operaブラウザ実行結果

opera