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.
<ph type="x-smartling-placeholder">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.
font-size-adjust wird verwendet.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.
font-size-adjust mit dem Messwert „ch-width“ für Schriftart verwenden.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.