CSS font-size-adjust – Referenz, Beispiel und Labor

stylesheet.css · font-size-adjust

.probe {
  font-size-adjust: 0.58;
}

Der Webautor schreibt einen Absatz, der Browser setzt ihn nach den Regeln des Stylesheets. Groß- und Kleinschreibung, Abstand, Farbe und Schnitt hängen an genau einer Eigenschaft.

berechneter Wertfont-size-adjust: 0.58

Box-Breite–

Box-Höhe–

Erläuterungen

Beispiel zur Wirkungsweise von `font-size-adjust`: Die Höhe der Schriftart *Arial* (oben) und English111 Vivace (unten) werden an die Höhe der Schriftart *Chicago* (mitte) angepasst.

Unterschiedliche Schriftarten weisen bei gleicher Schrifthöhe auch unterschiedliche x-Höhen auf. Fonts mit größerer x-Höhe sind aber leichter lesbar. Deshalb kann es passieren, dass ein Web-Dokument nur schwer lesbar ist, wenn der vom Designer vorgesehene Font nicht vorhanden ist und durch einen anderen mit kleinerer x-Höhe ersetzt wird. Um das zu vermeiden, wurde die Eigenschaft font-size-adjust eingeführt.

Sie dient dazu, die Schriftgröße abhängig von der Lesbarkeit zu korrigieren. Dazu wird das Verhältnis aus Schrifthöhe und Höhe der Kleinbuchstaben, der sog. Aspektwert, herangezogen. Mit Hilfe dieses Wertes wird die Schriftgröße so korrigiert, dass die Kleinbuchstaben ebenso hoch werden wie die Kleinbuchstaben einer Vergleichsschriftart.

Diese Eigenschaft wird bis jetzt noch von keinem der weiter verbreiteten Browser realisiert und wurde in CSS 2.1 wieder entfernt. Sie ist erst für CSS 3 wieder eingeplant.

Font-size-adjust ist nicht ein Teil der Kurzschrift- Eigenschaft font, wird aber durch font auf seinen Ausgangswert zurückgesetzt.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'font-size-adjust'
<number> | none | inherit

<number>: Aspektwert
none (Ausgangswert): Keine Korrektion wird durchgeführt.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Code-Beispiel

H1.schlagzeile {
   font-family: Verdana, "Trebuchet MS";
   font-size-adjust: 0.58; }

Browserunterstützung

: Die Eigenschaft font-size-adjust wird bis heute von keinem Browser
korrekt unterstützt.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen

font

Warum die x-Höhe zählt

Zwei Schriften in derselben Punktgröße können unterschiedlich groß wirken, und der Grund ist das Verhältnis zwischen der Höhe der Kleinbuchstaben und der angegebenen Schriftgröße. Dieses Verhältnis heißt Schriftaspekt, und die Eigenschaft nimmt es als Zahl entgegen.

Beim Lesen zählt die x-Höhe mehr als die Punktgröße, weil der überwiegende Teil eines Textes aus Kleinbuchstaben besteht. Eine Schrift mit kleiner x-Höhe wirkt in derselben Größe zierlicher und ist in kleinen Graden schlechter lesbar; eine mit großer x-Höhe wirkt kräftiger und braucht mehr Zeilenabstand.

Die Eigenschaft rechnet deshalb um: Sie behandelt die angegebene Zahl als gewünschten Aspekt und passt die tatsächliche Schriftgröße so an, dass die x-Höhe stimmt. Was gleich bleibt, ist die Höhe der Kleinbuchstaben, nicht die Zahl in der Deklaration.

Der eigentliche Anwendungsfall

Ihren Nutzen entfaltet die Angabe erst bei einer Rückfallschrift. Eine Schriftliste nennt mehrere Familien, und welche zum Zug kommt, hängt vom Gerät ab. Fällt die Wahl auf eine Familie mit deutlich anderer x-Höhe, ändert sich das Schriftbild spürbar, obwohl die Größe dieselbe ist.

Mit einem festgelegten Aspekt bleibt die wahrgenommene Größe stabil, gleich welche Familie am Ende gewählt wird. Das Beispiel oben zeigt genau diesen Fall: drei Schriften, deren Höhe aneinander angeglichen wird.

Wie bei font-stretch gilt auch hier, dass CSS 2.1 die Eigenschaft herausgenommen hat und ein späteres Modul für Schrift sie zurückgebracht hat. Sie ist heute umgesetzt und hat mit dem Nachladen von Schriften einen zweiten Anwendungsfall gewonnen: sie glättet den Unterschied zwischen der zuerst gezeigten Rückfallschrift und der später eintreffenden.

Den Wert findet man nicht durch Ausprobieren, sondern durch Messen: Er ist das Verhältnis der x-Höhe zur Schriftgröße der Schrift, die als Vorlage dienen soll. Bei den meisten Textschriften liegt er zwischen 0,45 und 0,55.

Besonderheiten im Medientyp `handheld`

Diese Eigenschaft ist nicht Teil des Standards CSS Mobile Profile 1.0. Mobilgeräte, deren Browser diese Eigenschaft umsetzen, sind bisher nicht bekannt.

Weitere Charakteristika

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangswert: none
Berechneter Wert: Nicht definiert
Vererbung: Ja, nicht- justierte Werte
Anwendbarkeit: Auf alle Elemente
%-Bezugswert: Nicht zutreffend
Mediengruppe(n): Visual

Verwendete Standards

Dieser CSS-Referenz liegen folgende Spezifikationen zugrunde: CSS 1, CSS 1 Errata, CSS 2.

CSS-Eigenschaft font-size-adjust