Eigenschaft font-size-adjust
Die Eigenschaft font-size-adjust erlaubt es,
die Schriftgröße zu kontrollieren, bei unverändertem
font-size
(vergrößern oder verkleinern).
Anwendung: Angenommen in font-family
sind zwei Schriftarten durch ein Komma angegeben, zum Beispiel
Georgia, "Times New Roman". Angenommen
auf dem Computer des Benutzers ist die Schriftart Georgia nicht vorhanden
- in diesem Fall wird "Times New Roman" angewendet.
Allerdings erwartet uns ein Problem - bei gleichem
Wert von font-size
werden die Schriftarten unterschiedlich aussehen. Im Beispiel
unten ist für beide Absätze font-size
auf 16px gesetzt, aber mit unterschiedlichen font-family.
Sehen Sie, wie sich die Größen unterscheiden:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Dies geschieht, weil die angezeigte
Schriftgröße in größerem Maße nicht
von der Eigenschaft font-size abhängt,
die nur die allgemeine Schriftgröße definiert,
sondern vom Verhältnis der Werte der Eigenschaft font-size
und der Größe x-height (x-height
- das ist der Unterschied zwischen der Größe des Kleinbuchstabens
"x" und des Großbuchstabens "X" für eine bestimmte
Schriftart).
Dieses Verhältnis wird Aspekt der Schriftart genannt und wird nach der Formel berechnet: Aspekt = font-size / x-height.
Das Problem der Größen löst die Eigenschaft font-size-adjust
(sie erlaubt es, den Aspekt der Schriftart zu ändern), welche
die zweite Schriftart zwingt, genauso groß
auszusehen wie die erste.
Lassen Sie uns Times New Roman genauso groß machen wie
Georgia. Uns ist der Aspekt von Georgia
bekannt - das ist 0.5 (siehe Tabelle unten).
Setzen wir font-size-adjust für den Text
mit Times New Roman auf den Wert 0.5
und wir werden sehen, dass der zweite Text genauso groß
geworden ist wie der erste:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Syntax
Selektor {
font-size-adjust: Zahl | none;
}
Werte
| Wert | Beschreibung |
|---|---|
number |
Eine Zahl definiert den Aspekt der Schriftart. |
none |
Keine Anpassung der Schriftgröße. |
Standardwert: none.
Wie bestimmt man den Aspektwert für eine Schriftart?
Sehen Sie sich den Auszug aus der W3C-Spezifikation an:
Der Proportionalitätsfaktor (Aspekt) für
ausgewählte Schriftarten kann berechnet werden, indem
derselbe Text, aber mit unterschiedlichem
Wert von font-size-adjust verglichen wird. Wenn der Wert
der Eigenschaft richtig gewählt ist, dann bleibt bei gleicher Schriftgröße
der Text unverändert für alle
auf der Seite verwendeten Schriftarten.
Ich führe die mir bekannten Aspektwerte für
einige Schriftarten an: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Beispiel
Vergleichen Sie, wie Text mit unterschiedlichem Wert von
font-size-adjust und gleichem font-size
und font-family aussieht:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Beispiel . Anwendung im echten Leben
Der Code unten bewirkt, dass im Falle des Fehlens
der Schriftart Georgia auf dem Computer des Benutzers,
die angewandte Schriftart Times New Roman
genauso groß ist wie Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
