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 festzulegen, der die x-Höhe der erstgewählten Schriftart in einer Ersatzschriftart beibehält.

Hinweis: Als Präsentationsattribut hat font-size-adjust auch ein entsprechendes CSS-Property: font-size-adjust. Wenn beides angegeben ist, hat das CSS-Property 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>

Nutzungshinweise

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

none

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

<number>

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

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

0 ergibt Text mit null Höhe (versteckter Text).

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

CSS font-size-adjust-Eigenschaft

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden