font-size-adjust

Baseline 2024

新推出

自 ⁨2024 年 7 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

font-size-adjust 屬性允許作者為元素指定一個縱橫比值，該值將保留替代字型中第一個選擇字型的 x-height（x 字高度）。

注意： 作為呈現屬性，font-size-adjust 還有一個對應的 CSS 屬性：font-size-adjust。當兩者都指定時，CSS 屬性具有更高的優先順序。

你可以將此屬性與以下 SVG 元素一起使用

示例

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>