font-size-adjust

Baseline 2024

例

html,
body,
svg {
  height: 100%;
}

html

<svg
  width="600"
  height="80"
  viewBox="0 0 500 80"
  xmlns="http://www.w3.org/2000/svg">
  <text y="20" font-family="Times, serif" font-size="10px">
    This text uses the Times font (10px), which is hard to read in small sizes.
  </text>
  <text y="40" font-family="Verdana, sans-serif" font-size="10px">
    This text uses the Verdana font (10px), which has relatively large lowercase
    letters.
  </text>
  <text
    y="60"
    font-family="Times, serif"
    font-size="10px"
    font-size-adjust="0.58">
    This is the 10px Times, but now adjusted to the same aspect ratio as the
    Verdana.
  </text>
</svg>

使用上のメモ

デフォルト値	`none`
値	`none` \| `<number>`
アニメーション	可

none

フォントサイズは、font-size プロパティのみに基づいて選択します。

<number>

フォントサイズを、その小文字の高さ（フォントの x-height によって決定される）が、指定された数値の font-size 倍になるように設定します。

指定する数値は、通常、第一候補の font-family のアスペクト比（x-height とフォントサイズの比率）で指定します。つまり、第一候補のフォントが利用可能な場合、ブラウザーが font-size-adjust に対応しているかどうかに関わらず、ブラウザー上で同じサイズで表示されることになります。

0 を指定すると、高さのゼロのテキスト（非表示のテキスト）が生成されます。