CSS - font-variation-settings

• トップ
• CSSリファレンス
• font-variation-settings

概要

説明

バリアブルフォント に対して太さ(weight)、幅(width)などのパラメータを指定します。バリアブルフォントのサンプルは下記を参照してください。

• https://v-fonts.com/

パラメータには下記などがあります。

• wdth : 横幅(width)。(詳細)
• wght : 太さ(weight)。(詳細)
• slnt : 斜頸(slant)。(詳細)
• opsz : オプティカルサイズ(optical size)。(詳細)
• ital : イタリック(italic)。(詳細)
• grad : グレード(grade)。(詳細)
• casl : カジュアルさ(casual)。(詳細)
• fill : 塗りつぶし(fill)。(詳細)
• crsv : 筆記体(cursive)。(詳細)
• mono : 等幅(monospace)。(詳細)
• soft : 柔らかさ(softness)。(詳細)
• wonk : ねじれ(wonky)。(詳細)
• YTUC : Parametric Uppercase Height axis ... 大文字の高さ。(詳細)
• YTLC : Parametric Lowercase Height axis ... 小文字xの高さ。(詳細)
• YTAS : Parametric Ascender Height axis ... 小文字の上にはみ出す部分の長さ。(詳細)
• YTDE : Parametric Descender Depth axis ... 小文字の下にはみ出す部分の長さ。(詳細)
• YTFI : Parametric Figure Height axis ... 数字の縦サイズ。(詳細)
• YOPQ : Parametric Thin Stroke axis ... 文字の細い方の線の太さ。(詳細)
• XOPQ : Parametric Thick Stroke axis ... 文字の太い方の線の太さ。(詳細)
• XTRA : Parametric Counter Width axis ... 文字の左右の縦線間の距離。(詳細)

例えば横幅(wght/weight)に 700 を指定するには下記の様にします。

font-variation-settings: "wght" 700;

下記の様に複数のパラメータを指定することもできます。

font-variation-settings: "wght" 700, "wdth" 150;

使用例

@font-face {
  font-family: "Roboto Flex";
  src: url('./fonts/RobotoFlex-VariableFont_GRAD,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght.ttf');
}
.sample {
  font-family: "Roboto Flex";
  font-size: 24px;
  line-height: 28px;
}
.wdth-150 {
  font-variation-settings: "wdth" 150;
}
.slnt-10 {
  font-variation-settings: "slnt" -10;
}
.wght-700 {
  font-variation-settings: "wght" 700;
}

<div class="sample">
 <div class="normal">Why 123. - normal</div>
 <div class="wdth-150">Why 123. - width 150</div>
 <div class="slnt-10">Why 123. - slant -10</div>
 <div class="wght-700">Why 123. - weight 700</div>
</div>

リンク

• https://developer.mozilla.org/ja/docs/Web/CSS/font-variation-settings
• https://w3c.github.io/csswg-drafts/css-fonts-4/#font-rend-desc