Cách xác định đúng kích thước phông chữ
Tôi cố gắng lấy một span
phần tử có chiều cao được xác định chính xác (trong ví dụ này 23px
). Tuy nhiên, trình duyệt thêm một số pixel vào phần tử.
Không có padding
và không margin
, đó là văn bản thực tế lớn hơn. Làm cách nào để tôi có được chiều cao văn bản (và với cả span
chiều cao) 23px
?
Yêu cầu:
- Không có thử và sai (hoặc phương pháp khác) để tìm ra một số tùy ý bên cạnh 23px để làm cho nó hoạt động.
- Toàn bộ văn bản cần nằm trong đường viền của khoảng (bất kể văn bản bên trong).
- Phương pháp này phải hoạt động trực quan, nếu văn bản kết thúc. (Tức là kích thước phần tử sẽ là 46px với hai dòng, 69px với ba dòng, v.v.)
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>
Trả lời
1 BodoThiesen
Alohci đưa ra câu trả lời trong một bình luận:
Bạn không thể làm điều đó ngay bây giờ. Bạn cần thực hiện một phép tính dựa trên 23px và các chỉ số phông chữ đi lên và xuống. Nhưng hiện tại, CSS không hiển thị số liệu phông chữ cho phép tính đó. Tôi tin rằng có những kế hoạch để hiển thị các số liệu phông chữ, mặc dù tôi không chắc chúng sẽ ở dạng nào. Không có trình duyệt nào hỗ trợ nó, dù sao.