Um die scheinbare Größe eines Fallback-Fonts an einen Webfont anzupassen, normalisieren Sie ihre x-Höhen mit der CSS-Eigenschaft font-size-adjust oder skalieren Sie eine bestimmte Fallback-Schriftart mit size-adjust. Diese Anleitung führt durch das Auswählen, Berechnen und Testen der Anpassung in einem Mac-Desktop-Browser.

Wählen Sie die Metrik, die zu Ihrem Text passt

Für gewöhnlichen englischen Fließtext beginnen Sie mit der x-Höhe: der Höhe von Kleinbuchstaben relativ zur Schriftgröße. Zwei Fonts, die auf 16px gesetzt sind, können unterschiedliche x-Höhen haben, sodass gleiche CSS-Größen nicht unbedingt gleich aussehen. MDN dokumentiert font-size-adjust speziell für die Normalisierung einer gewählten Font-Metrik über die zum Rendern von Text verwendeten Fonts. MDN: font-size-adjust

Wählen Sie die Metrik, bevor Sie Werte ändern. Absätze mit vielen Kleinbuchstaben deuten normalerweise auf ex-height hin; Großbuchstaben-Labels erfordern möglicherweise cap-height. Die Option ch-width normalisiert die Vorschubbreite des Null-Zeichens, was eine andere Frage beantwortet als die Anpassung der Kleinbuchstabenhöhe. Keine dieser Optionen verspricht gleiche Breiten für jedes Wort. MDN: font-size-adjust-Werte

Für diese Aufgabe verwenden Sie eine synthetische Seite, die eine Überschrift wie Sample collection, ein Label wie Tile 024 und einen Absatz wie Amber tiles sit beside a blue circle. Each tile has a short label. enthält. Ziel ist es, dass der Fallback-Kleinbuchstabentext ähnlich groß aussieht, während Sie prüfen, ob diese Elemente noch passen.

Ihre unmittelbare Aufgabe Beginnen Sie mit Separat zu prüfen
Kleinbuchstabengröße über einen Font-Stack normalisieren font-size-adjust mit einem Ziel-x-Höhen-Verhältnis Umbruch und Zeilenabstand
Einen bekannten Fallback-Face abstimmen Ein Fallback-Alias mit size-adjust Verfügbarkeit genau dieses lokalen Face
Unterschiede im vertikalen Layout reduzieren Font-Metrik-Overrides nach Größenanpassung Baselines und Absatzhöhe

Die ersten beiden Mechanismen haben unterschiedliche Geltungsbereiche: font-size-adjust wird auf Text angewendet, während size-adjust zu einer @font-face-Regel gehört und die Outlines und Metriken dieses Face skaliert. MDN: font-size-adjust, MDN: size-adjust

Eine zuverlässige Vergleichsgrundlage auf Ihrem Mac schaffen

Verwenden Sie eine Vorschauseite, deren Stylesheet Sie bearbeiten können. Die untenstehenden Beispiele nennen den vorhandenen Webfont Sample Web; ersetzen Sie diesen durch den tatsächlichen CSS-Familiennamen. Es handelt sich um Integrationsfragmente, die voraussetzen, dass der Webfont bereits deklariert ist und die Beispiel-Elemente existieren.

In Chrome auf Ihrem Mac klicken Sie mit der rechten Maustaste auf den Beispielabsatz und wählen Untersuchen. Alternativ drücken Sie Befehl + Option + C und wählen ihn aus. Chrome öffnet das Elements-Panel, wo Styles das angewendete CSS anzeigt. Chrome: Chrome DevTools öffnen

Öffnen Sie Computed, scrollen Sie zu Rendered Fonts und bestätigen Sie, welcher Font den Beispieltext tatsächlich zeichnet. Eine deklarierte Familienliste allein beweist nicht, dass der bevorzugte Font rendert. Die Chrome-Dokumentation zeigt, wie man diesen Abschnitt verwendet, um lokale und Netzwerk-Font-Ressourcen zu unterscheiden. Chrome: Andere Effekte anwenden

Halten Sie Viewport, Zoom, Schriftstärke, Schriftstil, Buchstabenabstand und Containerbreite während des Vergleichs fest. Untersuchen Sie zuerst den Webfont-Zustand. Ändern Sie dann vorübergehend die font-family des Absatzes auf Ihren beabsichtigten Fallback, z. B. Arial, sans-serif, und prüfen Sie den gerenderten Font erneut.

Verwenden Sie Styles, um Deklarationen und deren Kontrollkästchen zu bearbeiten, um Anpassungen ein- und auszuschalten. Dies ermöglicht den Vergleich desselben Absatzes ohne Änderung von Text oder Layout. Chrome: CSS-Funktionen-Referenz

Bei Messungen durch JavaScript warten Sie auf den relevanten Font-Load, anstatt eine willkürliche Verzögerung zu nutzen. document.fonts.load() kann ein bestimmtes Face anfordern; document.fonts.ready löst sich auf, nachdem das Laden der Dokument-Fonts und zugehörige Layout-Vorgänge abgeschlossen sind. Keines ersetzt die Prüfung des tatsächlich gerenderten Fonts. MDN: FontFaceSet.load(), MDN: FontFaceSet.ready

Ziel-x-Höhen-Verhältnis berechnen und anwenden

Das Ziel für numerisches font-size-adjust ist ein Verhältnis, keine Vergrößerungsprozentzahl. Teilen Sie die x-Höhe des Webfonts durch seine Units per em, wenn diese Metriken für das exakte Face verfügbar sind. Der Browser passt dann jeden gewählten Font auf diesen Zielanteil der deklarierten Schriftgröße an. W3C: CSS Fonts Module Level 5

Betrachten Sie diese explizit illustrativen Eingaben, die keine Messungen benannter Fonts sind:

Metrik Ziel-Webfont Fallback
Units per em 1.000 1.000
X-Höhe in Font-Einheiten 520 470
X-Höhen-Verhältnis 0,52 0,47

Bei einer deklarierten Größe von 16px beträgt die Ziel-x-Höhe 16 × 0.52 = 8.32px. Um diese Höhe zu erreichen, benötigt der Fallback einen Skalierungsfaktor von 0,52 ÷ 0,47, ungefähr 1.106383. Seine angepasste Rendering-Größe beträgt etwa 17,7021px. Diese Berechnungen veranschaulichen die Formel der Spezifikation; sie sagen keinen tatsächlichen Umbruch voraus.

Für den property-basierten Ansatz wenden Sie das Zielverhältnis auf den Text an. Dieses CSS-Fragment setzt voraus, dass der Beispielabsatz die Klasse sample-copy hat:

.sample-copy {
  font-family: "Sample Web", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: 0.52;
}

Hier gehört 0.52 zum illustrativen Webfont. Ersetzen Sie es durch das Verhältnis Ihres Ziel-Face. Ein ungenauer Wert ändert auch die gerenderte Größe des bevorzugten Fonts; die Eigenschaft gilt für jeden gewählten Font, einschließlich des Webfonts. W3C: CSS Fonts Module Level 5

Wenn Ihnen kein vertrauenswürdiges Verhältnis vorliegt, dokumentiert das W3C eine visuelle Kalibrierungsmethode: Vergleichen Sie zwei Proben desselben Fonts, derselben Größe und desselben Inhalts, bei der eine ohne Anpassung und die andere mit einem numerischen Testwert angepasst ist. Beginnen Sie bei 0.5 und verfeinern Sie, bis sie übereinstimmen. Verwenden Sie vergrößerte isolierte Proben für die Kalibrierung, kehren Sie dann zur normalen Lesegröße zurück, um das Ergebnis zu beurteilen. Behandeln Sie einen visuell abgeleiteten Wert als Annäherung. W3C: CSS Fonts Module Level 5

Das Keyword from-font nimmt sein Ziel vom ersten verfügbaren Font. Wenn der beabsichtigte Webfont nicht verfügbar ist, kann das bedeuten, dass ein anderer Font das Ziel liefert. Für einen Fallback, der einen bekannten Webfont auch dann matchen muss, wenn er nie lädt, verwenden Sie ein etabliertes numerisches Verhältnis. MDN: font-size-adjust-Werte

Ein Fallback-Alias verwenden, wenn Sie Kontrolle über ein Face benötigen

Wählen Sie size-adjust, wenn die Skalierung an ein bestimmtes Fallback-Face gebunden sein soll. Für das obige illustrative Paar wandeln Sie den Skalierungsfaktor in einen Prozentsatz um: 100 × 0.52 ÷ 0.47 = 110.6383%. Der Deskriptor skaliert Glyph-Vorschübe sowie Outlines und andere zugehörige Metriken. MDN: size-adjust

Dieses alternative Integrationsfragment geht davon aus, dass Arial Regular lokal verfügbar ist und der Ziel-Webfont bereits deklariert ist. Der Prozentsatz ist illustrativ, messen Sie also Ihr tatsächliches Paar, bevor Sie ihn übernehmen:

@font-face {
  font-family: "Sample Fallback";
  src: local("Arial"), local("ArialMT");
  font-weight: 400;
  font-style: normal;
  size-adjust: 110.6383%;
}

.sample-copy {
  font-family: "Sample Web", "Sample Fallback", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-size-adjust: none;
}

Der synthetische Alias hält die Anpassung spezifisch für diesen Stack. Seine local()-Quellen identifizieren ein bestimmtes Font-Face; sie wählen kein beliebiges system-sans-serif aus. Die CSS-Fonts-Spezifikation empfiehlt, volle und PostScript-Namen für das plattformübergreifende Matching anzugeben. Wenn keine Quelle verfügbar ist, fährt der Browser mit der verbleibenden Familienliste fort. W3C: CSS Fonts Module Level 4

Verwenden Sie dies als Alternative zur vorherigen Methode. Die Anwendung von font-size-adjust auf Text, der ein size-adjustiertes Face verwendet, kann die beabsichtigte Skalierung normalisieren, da die Eigenschaft die bereits überschriebene Metrik verwendet. MDN: font-size-adjust Beschreibung

Umbruch- und Baseline-Unterschiede separat diagnostizieren

Nach Anpassung der Kleinbuchstabenhöhe vergleichen Sie Überschrift, Label und Absatz an ihren vorgesehenen Breiten. Eine nützliche Reihenfolge ist: erst scheinbare Größe prüfen, dann Zeilenenden, dann Gesamthöhe des Blocks. Dies trennt drei sichtbare Probleme, die Sie sonst dazu verleiten könnten, immer wieder an einem Prozentwert zu drehen.

Wenn die Kleinbuchstabengröße richtig aussieht, der Absatz aber anders umbricht, vergleichen Sie einen anderen Fallback, bevor Sie die Skalierung weiter verfeinern. Skalierung auf eine Höhenmetrik lässt unterschiedliche Glyph-Designs nicht jeden Vorschub teilen. Notieren Sie das letzte Wort jeder Zeile im Webfont- und Fallback-Zustand, um den verbleibenden Unterschied greifbar zu machen.

Wenn Baseline oder Blockhöhe noch abweichen, untersuchen Sie ascent-override, descent-override und line-gap-override. Diese steuern Layout-Metriken, statt ein weiteres visuelles Größenziel zu liefern. Beispielsweise ist der Aufstieg (ascent) die Metrik oberhalb der Baseline, die beim Layout von Zeilenboxen verwendet wird. Leiten Sie Overrides vom tatsächlichen Font-Paar ab, statt unverwandte Prozentsätze zu kopieren. MDN: ascent-override

Für einen generierten Ausgangspunkt akzeptiert Capsizes dokumentierter createFontStack Metriken in bevorzugter Familienreihenfolge und liefert sowohl fontFamily als auch Fallback-fontFaces. Verwenden Sie beide Ausgaben zusammen. Die Dokumentation stellt auch @capsizecss/metrics für enthaltene Fonts und @capsizecss/unpack zum Extrahieren von Metriken aus einer benutzerdefinierten Datei bereit. Generierte Deklarationen benötigen dennoch Tests mit Ihrem Beispiel-Layout. Capsize-Dokumentation

Browser-Layout und Text-Shaping intakt halten

Canvas-Messungen können beim Vergleichen von Strings helfen, beantworten aber engere Fragen. WHATWG definiert measureText().width als Vorschubbreite, während tatsächliche Bounding-Box-Messungen den gezeichneten Text beschreiben. Canvas bereitet eine hypothetische unendlich breite Zeile vor, daher ist seine Breite keine Messung eines umgebrochenen DOM-Absatzes. WHATWG: HTML Standard, Canvas

Behalten Sie ganze Wörter und Sätze in Ihrem Test zusammen. Vermeiden Sie, Text als einzeln positionierte Zeichen neu aufzubauen oder anzunehmen, summierte Zeichenbreiten reproduzierten einen geformten String. CSS definiert Bedingungen, die Shaping über Inline-Grenzen hinweg regeln, einschließlich Grenzen mit Abstands- oder Ausrichtungsänderungen. Bewahren Sie die normale Struktur der Komponente bei der Validierung ihres Font-Fallbacks. W3C: CSS Text Module Level 3

Browser-Support prüfen und Vergleich abschließen

MDN listet grundlegendes font-size-adjust als Baseline 2024 und size-adjust als breit verfügbar seit September 2023. Das belegt keine Unterstützung für jede neuere Metrik oder jedes Keyword in älteren Browsern. Konsultieren Sie die Kompatibilitätstabellen für die Syntax, die Sie tatsächlich verwenden. MDN: font-size-adjust, MDN: size-adjust

Wo eine erweiterte Metrik-Form nicht verfügbar ist, verwenden Sie unterstützte numerische x-Höhen-Normalisierung, wenn sie der Aufgabe entspricht, oder einen unterstützten Fallback-spezifischen Deskriptor. Falls die erforderliche Anpassung gar nicht unterstützt wird, behalten Sie einen optisch nahen Fallback bei und prüfen Sie das unangepasste Layout in diesem Browser.

Schließen Sie ab, indem Sie den Vergleich für jede verwendete Schriftstärke und jeden Stil wiederholen, dann in den Mac-Browsern, die Sie unterstützen wollen. Bestätigen Sie jedes Mal den gerenderten Face. Behalten Sie die gewählte Anpassung nur bei, wenn die synthetische Überschrift, das Label und der Absatz in Webfont- und Fallback-Zustand akzeptable scheinbare Größe, Umbruch und Abstände haben.

Quellen