Visuell stabile gemischte Schriftarten

Wenn Sie verschiedene Schriftfamilien mischen, z. B. beim Einfügen von Inline-Code-Snippets oder beim Wechseln von Schriftfamilien für verschiedene Designs, können Unterschiede in der „x-Höhe“ (der Höhe von Kleinbuchstaben) dazu führen, dass eine Schriftart viel kleiner oder größer als die andere erscheint. Dies kann zu schlechter Lesbarkeit und Layoutverschiebungen führen.

Mit der Property font-size-adjust können Sie die visuelle Größe von Text normalisieren, indem Sie die Schriftgröße basierend auf einer bestimmten Schriftmetrik (normalerweise der x-Höhe) anpassen.

Implementierungsschritte

1. OBLIGATORISCH: Wenden Sie font-size-adjust auf Elemente an, bei denen eine einheitliche Schriftart wichtig ist, z. B. Container mit Webschriftarten oder Blöcke mit gemischten Schriftfamilien.
2. OBLIGATORISCH: Verwenden Sie das Schlüsselwort from-font für Elemente, um die Schriftgröße in verschachtelten Elementen automatisch an die Proportionen der primären Schriftart anzupassen.
3. OBLIGATORISCH: Verwenden Sie einen bestimmten numerischen Wert für die Überschreibung des Seitenverhältnisses für font-size-adjust (z.B. font-size-adjust: 0.5), um die Proportionen unabhängig voneinander zu normalisieren, wenn die zugrunde liegenden Schriftproportionen aus verschiedenen Designs stammen.

Beispiel: x-Höhe automatisch normalisieren

Die Verwendung von from-font ist die robusteste Methode. Das Seitenverhältnis der x-Höhe wird aus der ersten verfügbaren Schriftart extrahiert und auf Schriftarten in untergeordneten Elementen angewendet.

.content-area {
  font-family: "MyCustomWebFont";
  /* Automatically extract and apply x-height ratio from MyCustomWebFont */
  font-size-adjust: from-font;
}
.content-area span{
  font-family: "MyOtherCustomWebFont"
}

Beispiel: Festlegen einer bestimmten x-Höhe

Wenn die anzupassende Schriftart kein untergeordnetes Element der Schriftart ist, auf der die Größe basiert, geben Sie einen Wert an, um die x-Höhe anzupassen.

.theme{
  font-family: Verdana, sans-serif;
}
.theme.alternate{
  font-family: Times;
  /* Set to the aspect ratio (x-height / font-size) of the primary font */
  font-size-adjust: 0.51;
}

Fallback-Strategien

OBLIGATORISCH: In Browsern, die font-size-adjust nicht unterstützen, werden Schriftarten mit ihrem natürlichen font-size-Wert gerendert. Sie müssen eine gültige Fallback-Strategie für nicht unterstützte Browser mit einem @supports-Block bereitstellen, um dieses Problem zu beheben:

• Verwenden Sie @supports not (font-size-adjust: from-font), um die Unterstützung von font-size-adjust zu erkennen und Fallback-Stile bereitzustellen (z.B. angepasste Zeilenhöhe oder Schriftgröße).
• Wählen Sie Schriftarten mit ähnlichen x-Höhen wie Ihre primäre Schriftart aus.
• Wenden Sie bestimmte font-size- und line-height-Überschreibungen für alternative und verschachtelte Schriftfamilien an.

/* Feature detection for font-size-adjust */
@supports not (font-size-adjust: from-font) {
  .content-area {
    /* Manual adjustment for browsers without support (if needed) */
    line-height: 1.6;
    font-size: 1.2rem;
  }
}