Cara menentukan ukuran font dengan benar

Question

Saya mencoba untuk mendapatkan spanelemen dengan ketinggian yang ditentukan secara tepat (dalam contoh ini 23px). Namun, browser menambahkan beberapa piksel ke elemen tersebut.

Tidak ada paddingdan tidak margin, teks sebenarnya yang lebih besar. Bagaimana cara mendapatkan tinggi teks (dan dengan itu juga spantinggi) 23px?

Persyaratan:

• Tidak ada trial and error (atau metode lain) untuk mencari tahu beberapa angka acak di samping 23px untuk membuatnya bekerja.
• Seluruh teks harus tetap dalam batas rentang (terlepas dari teks di dalamnya).
• Metode tersebut harus bekerja secara intuitif, jika teks membungkus. (Ukuran elemen akan menjadi 46px dengan dua baris, 69px dengan tiga baris, dll.)

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>

Answer 1

Jawaban yang diberikan oleh Alohci dalam komentar:

Anda tidak dapat melakukan itu sekarang. Anda perlu melakukan kalkulasi berdasarkan 23px dan metrik font naik dan turun. Namun saat ini, CSS tidak menampilkan metrik font untuk penghitungan tersebut. Saya percaya bahwa ada rencana untuk mengekspos metrik font, meskipun saya tidak yakin bentuk apa yang akan mereka ambil. Tidak ada browser yang mendukungnya.