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>