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 Ersatzschrift bewahrt.

Hinweis: Als Präsentationsattribut hat font-size-adjust auch ein CSS-Eigenschafts-Pendant: font-size-adjust. Wenn beide angegeben sind, hat die CSS-Eigenschaft Vorrang.

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>

Verwendungshinweise

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 deren Kleinbuchstaben (wie durch die x-Höhe der Schriftart bestimmt) die angegebene Zahl mal die font-size beträgt.

Die angegebene Zahl sollte im Allgemeinen das Aspektverhältnis (Verhältnis von x-Höhe zur Schriftgröße) der bevorzugten font-family sein. Das bedeutet, dass die bevorzugte Schriftart, wenn sie verfügbar ist, in Browsern gleich groß erscheint, unabhängig davon, ob sie font-size-adjust unterstützen oder nicht.

Bei 0 hat der Text eine Höhe von null (versteckter Text).

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS font-size-adjust Eigenschaft