font-size-adjust

Baseline 2024

Newly available

Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Das Attribut font-size-adjust ermöglicht es Autoren, einen Aspektwert für ein Element anzugeben, der die x-Höhe der bevorzugten Schriftart in einer Ersatzschriftart beibehält.

Hinweis: Als Präsentationsattribut kann font-size-adjust als CSS-Eigenschaft verwendet werden. Weitere Informationen finden Sie in der CSS-Eigenschaft font-size-adjust.

Sie können dieses Attribut mit den folgenden SVG-Elementen verwenden:

Beispiel

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>

Nutzungshinweise

Standardwert	`none`
Wert	`none` \| `<number>`
Animierbar	Ja

none

Wählen Sie die Größe der Schriftart nur basierend auf der font-size Eigenschaft.

<number>

Wählen Sie die Größe der Schriftart so, dass ihre Kleinbuchstaben (bestimmt durch die x-Höhe der Schriftart) die angegebene Zahl multipliziert mit der font-size sind.

Die angegebene Zahl sollte im Allgemeinen das Seitenverhältnis (Verhältnis der x-Höhe zur Schriftgröße) der bevorzugten font-family sein. Dies bedeutet, dass die erstgewählte Schriftart, wenn sie verfügbar ist, in Browsern unabhängig davon, ob sie font-size-adjust unterstützen, dieselbe Größe hat.

0 ergibt Text ohne Höhe (versteckter Text).

Spezifikationen

Specification
CSS Fonts Module Level 4 # font-size-adjust-prop

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

font-size-adjust