CSS-Eigenschaft „font-size-Adjust“ ist jetzt in Baseline verfügbar

Rachel Andrew

Die CSS-Property font-size-adjust ist ab sofort in Chrome verfügbar. und wird Teil von Baseline Newly available. Diese Property kann verhindern, eine Verschiebung des Layouts beim Laden der Fallback-Schriftarten und stellen Sie sicher, und die Lesbarkeit von Fallback-Schriftarten bei kleineren Schriftgrößen. Das font-size-adjust Property ist Teil von Interop 2024 Dies ist also ein weiterer Gewinn für die Bemühungen, die Interoperabilität der Webplattform.

Das Problem

Wenn Sie zwei Schriftarten vergleichen, die je nach Form und Größe dieselbe Größe haben kann der angezeigte Text ganz unterschiedlich viel Platz einnehmen. Die folgende Demo zeigt beispielsweise Text in Verdana und Arial, beide auf 16 Pixel eingestellt.

Der Größenunterschied wird dadurch verursacht, dass der Aspektwert, die Höhe von Kleinbuchstaben im Vergleich zu Großbuchstaben in einer Schriftart, variiert je nach Schrift.

Dies kann zwei Probleme verursachen, wenn eine Schriftart mit einem anderen Seitenverhältnis verwendet wird. als Fallback festlegen. Zunächst einmal ändert sich der Platz, der von der Schriftart eingenommen wird. Zweitens ist die von Ihnen gewählte Fallback-Schriftart möglicherweise weniger gut lesbar als die vor allem bei kleinen Schriftgrößen. Das liegt daran, dass der ist die relative Höhe von Kleinbuchstaben zu Großbuchstaben. Lesbarkeit.

Vorteile von font-size-adjust

Mit der Eigenschaft font-size-adjust können Sie die Fallback-Schriftart anpassen, mit der ersten Schriftart übereinstimmen. Das folgende Beispiel zeigt die beiden Schriftarten, wurde die zweite Schriftart an die erste angepasst.

In diesem Beispiel wird ein einzelner Wert verwendet, eine Zahl, mit der die Schriftarten mithilfe der Funktion Standardmesswert für Schriftarten: ex-height. Das ist das Verhältnis von x-Höhe, Höhe eines kleingeschriebenen x in der Schriftart zur Schriftgröße. Sie können auch die Schriftart verwendet wird. Im nächsten Beispiel habe ich die Schriftarten mithilfe der ch-width zusätzlich zur Zahl.

Um alle möglichen Werte zu sehen, MDN-Dokumentation für font-size-adjust

Es lohnt sich, anhand der Fallback-Schriftart auf Ihrer Website zu prüfen, Eine Optimierung mit font-size-adjust kann Lesern helfen, die die Fallback-Schriftart verwenden. verbessert werden, insbesondere jetzt ist es überall verfügbar.