Jak poprawnie zdefiniować rozmiar czcionki

Aug 16 2020

Próbuję uzyskać spanelement o dokładnie określonej wysokości (w tym przykładzie 23px). Jednak przeglądarka dodaje do elementu kilka pikseli.

Nie ma paddingi nie margin, to rzeczywisty tekst jest większy. Jak uzyskać wysokość tekstu (a wraz z nią także spanwysokość) do 23px?

Wymagania:

  • Żadnych prób i błędów (lub innej metody), aby obliczyć dowolną liczbę poza 23 pikselami, aby to zadziałało.
  • Cały tekst musi znajdować się w granicach przęsła (niezależnie od znajdującego się w nim tekstu).
  • Metoda musi działać intuicyjnie, jeśli tekst zawija się. (Tj. Rozmiar elementu będzie wynosił 46 pikseli z dwoma liniami, 69 pikseli z trzema liniami itp.)

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>

Odpowiedzi

1 BodoThiesen Sep 11 2020 at 18:27

Odpowiedź udzielona przez Alohci w komentarzu:

Nie możesz tego teraz zrobić. Musisz wykonać obliczenia w oparciu o 23 piksele oraz metryki czcionek wznoszenia i opadania. Ale obecnie CSS nie ujawnia metryk czcionek dla tych obliczeń. Uważam, że istnieją plany ujawnienia metryk czcionek, chociaż nie jestem pewien, jaką formę przyjmą. Zresztą żadna przeglądarka go nie obsługuje.