Jak poprawnie zdefiniować rozmiar czcionki
Aug 16 2020
Próbuję uzyskać span
element o dokładnie określonej wysokości (w tym przykładzie 23px
). Jednak przeglądarka dodaje do elementu kilka pikseli.
Nie ma padding
i nie margin
, to rzeczywisty tekst jest większy. Jak uzyskać wysokość tekstu (a wraz z nią także span
wysokość) 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.