Làm thế nào để bù đắp dòng cơ sở chiều cao dòng?

Question

Vấn đề rất phổ biến với font-face, ví dụ:

font: 20px/20px 'ITC Avant Garde Gothic Std'; font-style: 'book'; letter-spacing: 1px; text-transform: uppercase; 

Vấn đề là tôi mong đợi văn bản theo chiều dọc làm trung tâm. Tuy nhiên, nó không phải là. Có cách nào để bù đắp đường cơ sở dòng chiều cao không? Không thực sự thay đổi line-height.

Answer 1

Hiện tượng này phụ thuộc vào phông chữ. Việc thiết kế phông chữ quyết định cách phông chữ sử dụng chiều cao của nó. Ví dụ: trong Arial, khi được đặt bằng chữ in hoa, chữ thường La tinh cơ bản được căn giữa theo chiều dọc, trong khi ở Verdana, chúng xuất hiện hơi thấp hơn một chút (tức là, nhiều hơn một chút so với bên dưới).

Bạn có thể tinh chỉnh điều này bằng cách sử dụng vị trí tương đối, nhưng sau đó bạn cần thêm đánh dấu, ví dụ:

<div><span>text</span></div> 

với CSS cho các thiết lập span, nói,

position: relative; 
top: 2px; 

này có thể gây ảnh hưởng xấu nếu các font sử dụng trong trình duyệt của người dùng khác với mong đợi của bạn.

Tôi không xem xét hiệu ứng có thể có của font-style: 'book', vì tôi không biết ý nghĩa của nó. Không có tài nguyên CSS nào tôi biết đề cập đến bất kỳ điều gì giống như vậy (các giá trị font-style là các từ khóa không được bỏ phiếu và không inlcude book).