So definieren Sie die Schriftgröße richtig

Aug 16 2020

Ich versuche ein spanElement mit einer genau definierten Höhe zu erhalten (in diesem Beispiel 23px). Der Browser fügt dem Element jedoch einige Pixel hinzu.

Es gibt kein paddingund nein margin, es ist der eigentliche Text, der größer ist. Wie bekomme ich die Texthöhe (und damit auch die spanHöhe) auf 23px?

Bedarf:

  • Kein Versuch und Irrtum (oder eine andere Methode), um eine beliebige Zahl neben 23px herauszufinden, damit es funktioniert.
  • Der gesamte Text muss innerhalb des Bereichs bleiben (unabhängig vom darin enthaltenen Text).
  • Die Methode muss intuitiv funktionieren, wenn Text umbrochen wird. (Das heißt, die Elementgröße beträgt 46 Pixel mit zwei Zeilen, 69 Pixel mit drei Zeilen usw.)

span {
  font-size: 23px;
  line-height: 23px;
  border: red dashed 1px;
}
<span>This element is ...x28 (...x30 with border), but should be ...x23 (...x25 with border).</span>

Antworten

1 BodoThiesen Sep 11 2020 at 18:27

Antwort von Alohci in einem Kommentar:

Das kannst du jetzt nicht machen. Sie müssten eine Berechnung durchführen, die auf den 23px- und den Auf- und Abstiegs-Schriftmetriken basiert. Derzeit stellt CSS die Schriftmetriken für diese Berechnung jedoch nicht zur Verfügung. Ich glaube, dass es Pläne gibt, die Schriftmetriken verfügbar zu machen, obwohl ich nicht sicher bin, wie sie aussehen werden. Es werden sowieso keine Browser unterstützt.