font-size-adjust
Baseline 2024Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Die font-size-adjust
CSS-Eigenschaft bietet eine Möglichkeit, die Größe von Kleinbuchstaben im Verhältnis zur Größe von Großbuchstaben zu modifizieren, was die allgemeine font-size
definiert. Diese Eigenschaft ist nützlich in Situationen, in denen ein Ersatzschrifttyp auftreten kann.
Lesbarkeit kann ein Problem werden, wenn die bevorzugte font-family
nicht verfügbar ist und die Ersatzschriftart einen signifikant anderen Aspektwert (Höhe der Kleinbuchstaben durch Schriftgröße geteilt) hat. Die Lesbarkeit von Schriftarten, insbesondere bei kleinen Schriftgrößen, wird mehr von der Größe der Kleinbuchstaben als von der Größe der Großbuchstaben bestimmt. Die Eigenschaft font-size-adjust
ist nützlich, um die Schriftgröße von Ersatzschriften anzupassen, um den Aspektwert über verschiedene Schriften hinweg konsistent zu halten und sicherzustellen, dass der Text unabhängig von der verwendeten Schrift ä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
Die Eigenschaft font-size-adjust
nimmt den Schlüsselwortwert none
, einen (<number>
oder from-font
) oder zwei (<font-metric>
und entweder <number>
oder from-font
) Werte an.
none
-
Es wird keine Anpassung an den
font-size
-Wert für die Ersatzschrift vorgenommen. <font-metric>
Optional-
Gibt die bevorzugte Schriftmetrik an, die zur Anpassung der Schriftgröße der Ersatzschrift verwendet werden soll. Dieser Parameter akzeptiert eines der unten aufgeführten Schlüsselwörter. Er ist ein optionaler Parameter, und
ex-height
wird verwendet, wenn keine<font-metric>
angegeben ist.ex-height
-
Verwendet das Verhältnis der x-Höhe (Höhe des Kleinbuchstabens "x" in einer Schriftart) zur Schriftgröße (Aspektwert), um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Kleinbuchstaben über Schriften hinweg zu normalisieren.
cap-height
-
Verwendet das Verhältnis der Kapitälchenhöhe (Höhe der Großbuchstaben) zur Schriftgröße, um die Ersatzschriftgröße anzupassen. Dieser Schlüsselwortwert wird verwendet, um Großbuchstaben über Schriften hinweg zu normalisieren.
ch-width
-
Verwendet das Verhältnis der Voranschrittsbreite (horizontaler Raum, den ein Zeichen in einer Schrift einnimmt) des Zeichens "0" (NULL, U+0030) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale enge Teilung von Schriften zu normalisieren.
ic-width
-
Verwendet das Verhältnis der Voranschrittsbreite des Zeichens "水" (CJK-Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die horizontale weite Teilung von Schriften zu normalisieren, insbesondere bei Schriften, die CJK-Zeichen (Chinesisch, Japanisch, Koreanisch) enthalten.
ic-height
-
Verwendet das Verhältnis der Voranschritthöhe (vertikaler Raum, den ein Zeichen in einer Schrift einnimmt) des Zeichens "水" (CJK-Wasserideogramm, U+6C34) zur Schriftgröße. Dieser Schlüsselwortwert wird verwendet, um die vertikale weite Teilung von Schriften zu normalisieren, insbesondere bei Schriften, die CJK-Zeichen enthalten.
<number>
-
Passt die verwendete Schriftgröße abhängig vom angegebenen
<font-metric>
an. Wenn kein<font-metric>
angegeben ist (in diesem Fall wird der Standardwertex-height
verwendet), passt der<number>
-Wert die Schriftgröße der Ersatzschrift an, damit ihre x-Höhe das angegebene Vielfache der Schriftgröße ist. Dieser Wert sollte im Allgemeinen dem Aspektwert (Verhältnis der x-Höhe zur Schriftgröße) der bevorzugten Schriftart entsprechen. Das bedeutet, dass die bevorzugte Schrift, wenn verfügbar, über Browser hinweg konsistent 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 entsprechend dem gewählten<font-metric>
an, um ein konsistentes Erscheinungsbild der angegebenen Schriftmetrik über verschiedene Schriften hinweg zu gewährleisten.Der
<number>
-Wert akzeptiert jede Zahl von0
bis unendlich.0
ergibt Text mit null Höhe (das heißt, der Text ist verborgen). Negative Werte sind ungültig. from-font
-
Verwendet den
<number>
-Wert für den angegebenen<font-metric>
aus der zuerst verfügbaren Schriftart.
Beschreibung
Um die Kompatibilität mit Browsern zu gewährleisten, die font-size-adjust
nicht unterstützen, wird diese Eigenschaft als numerischer Multiplikator der font-size
-Eigenschaft angegeben. Diese Zahl sollte im Allgemeinen dem Aspektwert der bevorzugten Schriftart entsprechen.
Hinweis:
Wenn das angegebene <font-metric>
in @font-face
überschrieben wurde, z. B. durch Verwendung des size-adjust
-Deskriptors, dann wird die überschreibene Metrik in der font-size-adjust
-Berechnung verwendet. Dies bedeutet, dass wenn font-size-adjust
und size-adjust
zusammen angewendet werden, size-adjust
keine Wirkung hat.
Die angepasste Schriftgröße wird anhand der Formel u = ( m / m′ ) s
berechnet, wobei:
-
m
das Verhältnis der angegebenen<font-metric>
zur bevorzugten Schriftgröße ist. -
m′
das Verhältnis der 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 eine font-size
von 12px
(s
) und das Verhältnis von cap-height
zu Schriftgröße beträgt 0.20
(m
). Das Verhältnis von cap-height
zu Schriftgröße in der Ersatzschrift beträgt 0.15
(m′
). Der font-size-adjust
-Wert wurde als cap-height 0.20
angegeben. Falls die primäre Schriftart nicht verfügbar ist, wird die angepasste Schriftgröße der Ersatzschrift auf 16px
berechnet ((0.20 / 0.15) * 12
). Dies stellt sicher, dass die cap-height
der Ersatzschrift ähnlich der der bevorzugten Schrift ist, wenn sie angezeigt wird.
Formale Definition
Anfangswert | none |
---|---|
Anwendbar auf | all elements and text. Auch anwendbar auf ::first-letter und ::first-line . |
Vererbt | Ja |
Berechneter Wert | wie angegeben |
Animationstyp | Nummer |
Formale Syntax
font-size-adjust =
none |
<number [0,∞]>
Beispiele
Normalisierung der Schriftgröße durch Klein- und Großbuchstaben
Dieses Beispiel zeigt, wie die font-size-adjust
-Eigenschaft verwendet werden kann, um denselben Aspektwert über Schriftarten hinweg beizubehalten. Die Verdana-Schriftart hat einen relativ hohen Aspektwert von 0.545
, was bedeutet, dass die Kleinbuchstaben im Vergleich zu den Großbuchstaben relativ hoch sind. Dies macht den Text in kleinen Schriftgrößen lesbar. Die Times-Schrift hat jedoch einen niedrigeren Aspektwert von 0.447
, sodass der Text bei kleinen Größen weniger lesbar ist. Wenn Verdana die bevorzugte Schrift und Times die Ersatzschrift ist, kann durch Angabe der font-size-adjust
-Eigenschaft der gleiche Aspektwert in Times beibehalten werden. Fällt die Schrift auf Times zurück, behält der Text eine ähnliche Lesbarkeit bei, wie er mit Verdana hätte.
Ebenso beträgt das Verhältnis von Kapitälchenhöhe zur Schriftgröße in Verdana 0.73
und in Times 0.66
. Wenn die font-size-adjust
-Eigenschaft auf Times angewendet wird, um ihre Großbuchstaben an das Verhältnis in Verdana anzupassen, zeigt die Times-Schriftart in angepasster Schriftgröße ((0.73 / 0.66) * 14) 15.48px
an.
<p class="verdana">
A: This text uses the Verdana font (14px), which has relatively large
lowercase letters.
</p>
<p class="times">
B: This text uses the Times font (14px), which is hard to read in small sizes.
</p>
<p class="times adj-times-ex-height">
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 class="times adj-times-cap-height">
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;
}
Ohne font-size-adjust
in B
könnte der Wechsel von der Verdana-Schrift zur Times-Schrift eine bemerkbare Abnahme der Lesbarkeit aufgrund ihres niedrigeren Aspektwerts verursachen.
In C
, beachten Sie, dass nur ein Wert für die font-size-adjust
-Eigenschaft angegeben ist, sodass der Standardwert <font-metric>
ex-height
verwendet wird. D
zeigt, wie die Schrift im Vergleich zu A
aussehen würde, wenn ihre Großbuchstaben-Höhe angepasst wird.
Bestimmung des Aspektwerts einer Schrift
Für eine bestimmte Schriftart kann derselbe Inhalt in zwei nebeneinander liegenden <span>
-Elementen verwendet werden, um den Aspektwert der Schrift zu bestimmen. Wenn dieselbe Schriftgröße für Inhalte in beiden Spans verwendet wird, stimmen die Spans überein, wenn der font-size-adjust
-Wert in einem Span 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 ist es, die font-size-adjust
-Eigenschaft für das rechte <span>
in jedem Paar anzupassen, bis die Ränder um die beiden Buchstaben herum ausgerichtet sind. Der resultierende font-size-adjust
-Wert kann als Aspektwert für die Schrift angesehen werden.
Ausgehend von 0.6
im ersten Paar und einer Anpassung auf 0.5
im zweiten, passen wir den Wert der font-size-adjust
-Eigenschaft an, bis die Ränder um die „b“-Buchstaben im dritten Paar perfekt ausgerichtet sind. In diesem Beispiel wird der Aspektwert als 0.482
bestimmt.
<div>
<p><span>b</span><span class="adjust1">b</span></p>
0.6
</div>
<div>
<p><span>b</span><span class="adjust2">b</span></p>
0.5
</div>
<div>
<p><span>b</span><span class="adjust3">b</span></p>
0.482
</div>
body {
display: flex;
}
div {
text-align: center;
}
p {
font-family: Futura;
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
Specification |
---|
CSS Fonts Module Level 5 # font-size-adjust-prop |
Browser-Kompatibilität
Siehe auch
font-size
font-weight
size-adjust
@font-face
Deskriptor- SVG
font-size-adjust
Attribut - Lernen: Grundlegende Text- und Schriftgestaltung