CSS tùy chỉnh phông chữ dọc bù đắp (bug?)

Question

tôi sử dụng phông chữ tùy chỉnh trong CSS của tôi với phương pháp này:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'); 
    src: url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
.gabriola { 
    font-size: 20px; 
    line-height: 20px; 
    height: 20px; 
    background: red; 
} 

<div class="gabriola">Some texty text here</div> 

Mỗi trình duyệt làm cho phông chữ này bằng cách riêng của nó với dọc bù đắp trên và dưới như thế này

Tôi đang làm gì sai? Cảm ơn

Answer 1

Có thể không có bất kỳ điều gì bạn đang làm sai. Dưới đây là một số điểm có thể áp dụng, một số có thể điều khiển bởi bạn, một số không.

1. Chỉ cần chắc chắn, đặt rõ ràng vertical-align: baseline.
2. Các tệp khác nhau (.eof, .woff, .ttf) có thể không được xác định giống nhau và do đó các trình duyệt khác nhau đang sử dụng các tệp khác nhau và hiển thị sự khác biệt.
3. Không chắc chắn nếu có hai src gọi là rối tung mọi thứ lên, nhưng bạn có thể thử loại bỏ sự thứ hai:

@font-face { 
    font-family: 'Gabriola'; 
    src: url('Gabriola.eot'), 
     url('Gabriola.eot?#iefix') format('embedded-opentype'), 
     url('Gabriola.woff') format('woff'), 
     url('Gabriola.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Đây là tất cả dự đoán đơn thuần. Bạn sẽ phải kiểm tra # 1, 3. Nếu vấn đề là # 2, tôi không chắc chắn có một giải pháp thanh lịch.

Có, tất nhiên, sự báo trước về this site:

Hãy ghi nhớ rằng font rendering có thể rất khác nhau trên các trình duyệt và hệ điều hành . Nhiều nhà phát triển đã trải qua kết quả kém như vậy từ Windows và Internet Explorer mà họ tránh sử dụng phông chữ tùy chỉnh hoàn toàn. Luôn chắc chắn kiểm tra kết quả của bạn chặt chẽ trên tất cả các trình duyệt mà bạn có thể quyết định xem chất lượng có được chấp nhận hay không.

Cập nhật

This post đưa ra một số lời khuyên về khả năng giải quyết các vấn đề rendering. Điều này là dành cho Font Squirrel, và ông ghi chú cụ thể:

Nếu bạn đã tải xuống bộ này, bạn có thể thử tạo lại phông chữ với máy phát . Chúng tôi thực hiện các điều chỉnh định kỳ cho máy phát điện có thể cải thiện việc gợi ý hoặc hiển thị phông chữ.

Tuy nhiên, ông cũng khẳng định,

Không để vượt qua buck, nhưng nguyên nhân phổ biến nhất là xấu gốc phông chữ.

Điều gì xảy ra với quan điểm của tôi # 2.

Answer 2

Tôi đã gặp vấn đề tương tự và giải pháp là tạo lại phông chữ với các thuộc tính của bản gốc mà không thay đổi bất kỳ thứ gì trong tệp mới với trình tạo phông chữ logic Hight, phông chữ không thay đổi và bằng với vấn đề gốc được sửa và căn chỉnh đến sự hoàn hảo trong tất cả các trình duyệt bao gồm ie6, là công việc của một vài giờ nhưng đây là kết quả trong trường hợp bạn cần một số người dùng.

http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip

Answer 3

Tôi biết nó được 5 năm kể từ khi OP hỏi những câu hỏi, nhưng tôi thấy kỹ thuật tuyệt vời này trên nhận được văn bản ban đầu canh một cách chính xác.

Về cơ bản, vùng chứa văn bản phải là một khối nội tuyến có chiều cao dòng: 0; Sau đó, bạn tạo một pseudo-yếu tố inline-block và thiết lập chiều cao của mình theo line-height bạn muốn:

span { 
 
    font-size: 2em; 
 
    background: red; 
 
} 
 
span.baseline-align { 
 
    vertical-align: baseline; 
 
} 
 

 
span.true-baseline-align { 
 
    display: inline-block; 
 
    line-height: 0; 
 
} 
 
span.true-baseline-align::after { 
 
    content: ''; 
 
    display: inline-block; 
 
    height: 1em; // this is where you control line-height 
 
}

<span>Normal text</span> 
 
<br><br> 
 
<span class="baseline-align">With vertical-align: baseline</span> 
 
<br><br> 
 
<span class="true-baseline-align">with trick to really baseline-align</span>

http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/