Diefont-size-adjust-Eigenschaft vonCSS bietet eine Möglichkeit, die Größe von Kleinbuchstaben relativ zur Größe von Großbuchstaben anzupassen, was die gesamtefont-size definiert. Diese Eigenschaft ist nützlich in Situationen, in denen es zu Schriftart-Ersatz kommen kann.

Die Lesbarkeit kann problematisch werden, wenn die bevorzugtefont-family nicht verfügbar ist und die Ersatzzufallsschrift eine erheblich unterschiedliche Aspekt-Wert (Höhe der Kleinbuchstaben geteilt durch Schriftgröße) hat. Die Lesbarkeit von Schriftarten, insbesondere bei kleinen Schriftgrößen, wird mehr durch die Größe der Kleinbuchstaben als durch die Größe der Großbuchstaben bestimmt. Diefont-size-adjust-Eigenschaft ist nützlich, um die Schriftgröße von Ersatzschriften anzupassen, um den Aspektwert über verschiedene Schriftarten konsistent zu halten, wodurch sichergestellt wird, dass der Text unabhängig von der verwendeten Schriftart ähnlich erscheint.

Syntax

/* Keyword */font-size-adjust: none;/* One value: <number> or from-font */font-size-adjust: 0.5;font-size-adjust: from-font;/* Two values */font-size-adjust: ex-height 0.5;font-size-adjust: ch-width from-font;/* Global values */font-size-adjust: inherit;font-size-adjust: initial;font-size-adjust: revert;font-size-adjust: revert-layer;font-size-adjust: unset;

Werte

Diefont-size-adjust-Eigenschaft nimmt als Wert das Schlüsselwortnone, einen (<number> oderfrom-font) oder zwei (<font-metric> und entweder<number> oderfrom-font) Werte an.

none

Es wird keine Anpassung desfont-size-Werts für die Ersatzschrift vorgenommen.

<font-metric>Optional

Gibt das Messsystem der bevorzugten Schrift an, das zur Anpassung der Schriftgröße der Ersatzschrift verwendet werden soll. Dieser Parameter akzeptiert eines der unten aufgelisteten Schlüsselwörter. Es ist ein optionaler Parameter, undex-height wird verwendet, wenn kein<font-metric> angegeben ist.

ex-height

Verwendet das Verhältnis von x-Höhe (Höhe des Kleinbuchstabens "x" in einer Schrift) zur Schriftgröße (Aspektwert), um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Kleinbuchstaben über Schriftarten hinweg zu normalisieren.

cap-height

Verwendet das Verhältnis von Großbuchstabenhöhe zur Schriftgröße, um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Großbuchstaben über Schriftarten hinweg zu normalisieren.

ch-width

Verwendet das Verhältnis der Vorabreit (horizontaler Platzbedarf eines Zeichens in einer Schrift) des Zeichens "0" (NULL, U+0030) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um den horizontalen engen Strich von Schriftarten zu normalisieren.

ic-width

Verwendet das Verhältnis der Vorabreit des Zeichens "水" (CJK-Wasser-Ideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um den horizontalen weiten Strich von Schriftarten zu normalisieren, insbesondere solche, die CJK-Zeichen (Chinese, Japanese, Korean) enthalten.

ic-height

Verwendet das Verhältnis der Vorabhöhe (vertikaler Platzbedarf eines Zeichens in einer Schrift) des Zeichens "水" (CJK-Wasser-Ideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um den vertikalen weiten Strich von Schriftarten zu normalisieren, insbesondere solche, die CJK-Zeichen enthalten.

<number>

Passt die verwendete Schriftgröße entsprechend dem angegebenen<font-metric> an. Wenn kein<font-metric> angegeben wird (in diesem Fall wird der Standardwertex-height verwendet), passt der<number>-Wert die Schriftgröße der Ersatzschrift so an, dass ihre x-Höhe das angegebene Vielfache der Schriftgröße ist. Dieser Wert sollte im Allgemeinen dem Aspektwert (Verhältnis von x-Höhe zur Schriftgröße) der bevorzugten Schrift entsprechen. Dies bedeutet, dass die bevorzugte Schrift, wenn verfügbar, konsistent über verschiedene Browser angezeigt wird, unabhängig von deren Unterstützung fürfont-size-adjust.

Wenn ein<font-metric>-Wert angegeben ist, passt der<number>-Wert die Schriftgröße gemäß dem gewählten<font-metric> an, um ein konsistentes Erscheinungsbild für den angegebenen Schriftmaßstab über verschiedene Schriftarten hinweg aufrechtzuerhalten.

Der<number>-Wert akzeptiert jede Zahl von0 bis unendlich.0 ergibt Text mit null Höhe (d.h. der Text ist versteckt). Negative Werte sind ungültig.

from-font

Verwendet den<number>-Wert für den angegebenen<font-metric> aus der ersten verfügbaren Schriftart.

Beschreibung

Um die Kompatibilität mit Browsern zu gewährleisten, diefont-size-adjust nicht unterstützen, wird diese Eigenschaft als numerischer Multiplikator derfont-size-Eigenschaft angegeben. Diese Zahl sollte im Allgemeinen dem Aspektwert der bevorzugten Schriftart entsprechen.

Die angepasste Schriftgröße wird mit der Formelu = ( m / m′ ) s berechnet, wobei:

• m das Verhältnis des angegebenen<font-metric> zur bevorzugten Schriftgröße ist.

• m′ das Verhältnis des entsprechenden<font-metric> zur Ersatzschriftgröße ist.

• s der Wert derfont-size-Eigenschaft ist.

• u die neue, angepasste Schriftgröße für die Ersatzschrift ist.

Betrachten Sie dieses Beispiel, um zu sehen, wie die angepasste Schriftgröße berechnet wird. Eine bevorzugte Schrift hat einefont-size von12px (s), und das Verhältnis voncap-height zur Schriftgröße ist0.20 (m). Dascap-height zur Schriftgröße Verhältnis in der Ersatzschrift beträgt0.15 (m′). Derfont-size-adjust-Wert wurde alscap-height 0.20 angegeben. Wenn die primäre Schrift nicht verfügbar ist, wird die angepasste Schriftgröße der Ersatzschrift so berechnet, dass sie16px beträgt ((0.20 / 0.15) * 12). Dies stellt sicher, dass diecap-height der Ersatzschrift der der bevorzugten Schrift beim Anzeigen ähnelt.

Formale Definition

Formale Syntax

font-size-adjust =
none|
[ex-height|cap-height|ch-width|ic-width|ic-height]?[from-font|<number [0,∞]>]

Beispiele

Schriftgröße durch Klein- und Großbuchstaben normalisieren

Dieses Beispiel zeigt, wie diefont-size-adjust-Eigenschaft verwendet werden kann, um den gleichen Aspektwert über Schriftarten beizubehalten. Die Verdana-Schrift hat einen relativ hohen Aspektwert von0.545, was bedeutet, dass die Kleinbuchstaben im Verhältnis zu den Großbuchstaben relativ hoch sind. Dadurch erscheint der Text in kleinen Schriftgrößen lesbar. Die Times-Schrift hat jedoch einen niedrigeren Aspektwert von0.447, sodass der Text bei kleinen Größen weniger lesbar ist. Wenn Verdana die bevorzugte Schriftart ist und Times die Ersatzschriftart, kann die Angabe derfont-size-adjust-Eigenschaft dazu beitragen, den gleichen Aspektwert in Times beizubehalten. Wenn die Schrift also auf Times zurückfällt, behält der Text ein ähnliches Maß an Lesbarkeit bei, wie es mit Verdana der Fall wäre.

Ähnlich ist das Verhältnis von Großbuchstabenhöhe zur Schriftgröße in Verdana0.73 und in Times0.66. Wenn diefont-size-adjust-Eigenschaft auf Times angewendet wird, um ihre Großbuchstaben an das Verhältnis in Verdana anzupassen, wird die Times-Schrift in einer angepassten Schriftgröße ((0.73 / 0.66) * 14)15.48px angezeigt.

<p>  A: This text uses the Verdana font (14px), which has relatively large  lowercase letters.</p><p>  B: This text uses the Times font (14px), which is hard to read in small sizes.</p><p>  C: This text in 14px Times font is adjusted to the same aspect value as the  Verdana font, so lowercase letters are normalized across the two fonts.</p><p>  D: This text in 14px Times font is adjusted to the same cap-height to font  size ratio as the Verdana font, so uppercase letters are normalized across the  two fonts.</p>

.times {  font-family: "Times", serif;  font-size: 14px;}.verdana {  font-family: "Verdana", sans-serif;  font-size: 14px;}.adj-times-ex-height {  font-size-adjust: 0.545;}.adj-times-cap-height {  font-size-adjust: cap-height 0.73;}

Ohnefont-size-adjust inB könnte der Wechsel von der Verdana-Schrift zur Times-Schrift aufgrund ihres niedrigeren Aspektwerts zu einem spürbaren Rückgang der Lesbarkeit führen.InC fällt auf, dass nur ein Wert für diefont-size-adjust-Eigenschaft angegeben ist, sodass der Standard-<font-metric>-Wertex-height verwendet wird.D zeigt, wie die Schrift im Vergleich zuA aussehen würde, wenn die Höhe der Großbuchstaben angepasst wird.

Bestimmung des Aspektwerts einer Schrift

Für eine bestimmte Schrift können die gleichen Inhalte in zwei nebeneinander liegenden<span>-Elementen verwendet werden, um den Aspektwert der Schrift zu bestimmen. Wenn dieselbe Schriftgröße für Inhalte in beiden Spannen verwendet wird, passen die Spannen zueinander, wenn derfont-size-adjust-Wert in einer Spanne für die gegebene Schrift korrekt ist.

Im folgenden Beispiel gibt es drei Paare von nebeneinander liegenden<span>-Elementen, die jeweils den Buchstaben "b" enthalten. Das Ziel besteht darin, diefont-size-adjust-Eigenschaft für den rechten<span> in jedem Paar so anzupassen, bis die Ränder um die beiden Buchstaben übereinstimmen. Der resultierendefont-size-adjust-Wert kann als Aspektwert der Schrift betrachtet werden.

Beginnend bei0.6 im ersten Paar und Anpassung auf0.5 im zweiten, setzen wir die Anpassung desfont-size-adjust-Eigenschaftswerts fort, bis die Ränder um die "b"-Buchstaben im dritten Paar perfekt übereinstimmen. In diesem Beispiel wird der Aspektwert auf0.482 bestimmt.

<div>  <p><span>b</span><span>b</span></p>  0.6</div><div>  <p><span>b</span><span>b</span></p>  0.5</div><div>  <p><span>b</span><span>b</span></p>  0.482</div>

body {  display: flex;}div {  text-align: center;}p {  margin: 0 30px 10px 30px;}

body {  display: flex;}div {  text-align: center;}p {  font-family: "Futura", sans-serif;  font-size: 50px;}span {  border: solid 1px red;}.adjust1 {  font-size-adjust: 0.6;}.adjust2 {  font-size-adjust: 0.5;}.adjust3 {  font-size-adjust: 0.482;}

Spezifikationen

Browser-Kompatibilität

Siehe auch

• font-size
• font-weight
• size-adjust@font-face Deskriptor
• SVG-Attributfont-size-adjust
• Erlernen: Grundlagen der Text- und Schriftgestaltung