Documentation CSS

この記事で学べること

  • font-variation-settingsプロパティの概念と目的
  • wght、wdth、slnt、italなどの軸の種類
  • 可変フォントのカスタマイズ方法
  • 太さ・幅・斜体の細かい調整
  • ブラウザとフォントの対応状況

概要

CSSのfont-variation-settingsプロパティは、可変フォント（【Variable Font】）の特定の軸を調整するためのプロパティです。従来のフォントはスタイル（太さ、幅、斜体など）が固定されていましたが、可変フォントは同じファイル内でこれらの属性を自由に変更できるため、デザインの柔軟性が向上します。font-variation-settingsを使用することで、細かなフォント調整が可能になり、デザインに合わせたカスタマイズができます。

font-variation-settingsの基本構文

selector {
  font-variation-settings: "axis" value;
}
  • "axis"
    調整するフォントの軸を指定する4文字のタグ。例えば、"wght"（ウエイト）、"wdth"（幅）、"slnt"（斜体）、"ital"（イタリック）などがあります。
  • value
    軸の値を指定します。各軸に適した数値を設定します。

代表的な軸の種類

  • "wght" - フォントの太さ（ウエイト）を設定。通常、100から900の範囲。
  • "wdth" - フォントの幅を設定。通常、75から125の範囲。
  • "slnt" - 斜体の度合いを設定。通常、負の値で指定します（例: -10）。
  • "ital" - イタリックスタイルのオン/オフを設定。0（オフ）または1（オン）。

使用例

基本的な使用例 - フォントの太さを調整する

以下の例では、font-variation-settingsを使って、フォントのウエイトをカスタマイズしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>font-variation-settingsの使用例</title>
    <style>
      @font-face {
        font-family: "CustomVariableFont";
        src: url("path/to/variable-font.woff2") format("woff2");
      }
      .normal {
        font-family: "CustomVariableFont";
        font-variation-settings: "wght" 400; /* 標準の太さ */
      }
      .bold {
        font-family: "CustomVariableFont";
        font-variation-settings: "wght" 700; /* 太めのスタイル */
      }
      .extra-bold {
        font-family: "CustomVariableFont";
        font-variation-settings: "wght" 900; /* 非常に太いスタイル */
      }
    </style>
  </head>
  <body>
    <p class="normal">これは標準のウエイト（太さ）です。</p>
    <p class="bold">これは太めのウエイトです。</p>
    <p class="extra-bold">これは非常に太いウエイトです。</p>
  </body>
</html>

解説

この例では、可変フォントの"wght"軸を変更することで、フォントの太さを調整しています。400は標準的な太さ、700はボールド、900は非常に太いスタイルです。font-variation-settingsを使うことで、デザインに応じた細かな調整が可能になります。

応用例 - 幅と斜体の調整

可変フォントでは、幅（"wdth"）や斜体（"slnt"）の調整も可能です。以下の例では、フォントの幅と斜体をカスタマイズしています。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>幅と斜体の調整例</title>
    <style>
      @font-face {
        font-family: "AdvancedVariableFont";
        src: url("path/to/advanced-variable-font.woff2") format("woff2");
      }
      .wide {
        font-family: "AdvancedVariableFont";
        font-variation-settings: "wdth" 120; /* 幅広のスタイル */
      }
      .narrow {
        font-family: "AdvancedVariableFont";
        font-variation-settings: "wdth" 80; /* 幅が狭いスタイル */
      }
      .slanted {
        font-family: "AdvancedVariableFont";
        font-variation-settings: "slnt" -10; /* 斜体スタイル */
      }
    </style>
  </head>
  <body>
    <p class="wide">これは幅広のフォントスタイルです。</p>
    <p class="narrow">これは幅が狭いフォントスタイルです。</p>
    <p class="slanted">これは少し斜めのスタイルです。</p>
  </body>
</html>

解説

この例では、"wdth"軸でフォントの幅を調整し、"slnt"軸でフォントを斜めに設定しています。こうした細かな調整が可変フォントの魅力であり、font-variation-settingsを使うことで実現できます。

font-variation-settingsの注意点

  • フォントの対応状況
    font-variation-settingsは、可変フォントにのみ適用可能です。使用するフォントがこの機能に対応しているかを確認する必要があります。
  • ブラウザのサポート状況
    全てのブラウザが可変フォントとfont-variation-settingsをサポートしているわけではありません。特に古いブラウザでは、フォントの変化が反映されない場合がありますので、ブラウザサポートを確認してください。
  • 過度な設定は避ける
    極端な値を設定すると、フォントが読みにくくなったり、意図しない見た目になることがあります。適切な範囲での使用を心がけましょう。

まとめ

font-variation-settingsプロパティを活用することで、可変フォントの特性を最大限に引き出し、デザインにマッチしたフォントスタイルを作成できます。フォントの太さや幅、斜体の度合いを自由に調整することで、より一貫性のあるデザインを実現できるでしょう。可変フォントの柔軟性を生かし、洗練されたウェブデザインを目指してみてください。

ポイントの振り返り

軸説明値の範囲
wghtウェイト（太さ）100-900
wdth幅75-125
slnt斜体の度合い-90~90
italイタリック0または1

関連プロパティ

プロパティ説明
font-weightフォントの太さ
font-stretchフォントの幅
font-styleフォントのスタイル

参考文献

円