Tại sao có sự khác biệt về @ phông chữ ở chiều cao dòng trên Windows và Mac OS X?

Question

Tôi đã tìm kiếm câu trả lời cho điều này trong một giờ mà không có may mắn.

Tôi đang căn giữa văn bản theo chiều dọc bên trong hộp bằng cách sử dụng thuộc tính CSS "chiều cao". Điều này làm việc tốt với phông chữ tiêu chuẩn an toàn và cũng hoạt động tốt cho "" @ font-face "" font nhúng trên Windows.

Tuy nhiên, trên máy Mac, có vấn đề với việc định tâm này bằng cách sử dụng "@ phông mặt". Xem: http://cl.ly/QBlE/o

Tôi không biết phải làm gì với điều này. Cách duy nhất để khắc phục điều này là sử dụng chiều cao dòng khác nhau cho Mac. Nhưng theo tôi biết điều này là không thể mà không có JavaScript hoặc lập trình phía máy chủ và dường như không phải là giải pháp thích hợp cho tôi.

Ví dụ (hộp màu xanh ở đầu trang):

#header .login { 
    text-decoration:none; 
    margin:11px 9px 0 9px; 
    float:right; 
    font-size:11px; 
    color:#fff; 
    background:url(../img/header-login.png); 
    width:118px; 
    height:26px; 
    line-height:26px; 
    padding:0 0 0 10px; 
    text-transform:uppercase; 
    font-family: 'Helvetica55', Sans-Serif; 
} 

Answer 1

Thay vì sử dụng chiều cao dòng khác nhau, hãy thử sử dụng font-size-adjust tài sản với giá trị auto.

Từ W3C:

Trong tình huống mà phông chữ dự phòng xảy ra, phông chữ dự phòng có thể không chia sẻ tỷ lệ khía cạnh giống như họ phông chữ mong muốn và do đó sẽ xuất hiện ít có thể đọc được. Thuộc tính điều chỉnh kích thước phông chữ là một cách để bảo toàn khả năng đọc văn bản khi dự phòng phông chữ xảy ra. Nó thực hiện điều này bằng cách điều chỉnh kích thước phông chữ sao cho chiều cao x là như nhau bất kể phông chữ được sử dụng.

Answer 2

Trước tiên, hãy thử đặt chiều cao dòng từ px thành em.

Nếu cách này không hiệu quả thì có thể do kiểu mặc định khác nhau đối với mỗi trình duyệt. Những kiểu mặc định đó có thể gây rối với phong cách của bạn. Vì vậy, hãy thử sử dụng tệp reset.css trong trang của bạn.

Answer 3

Sự cố có thể nằm trong phông chữ được sử dụng. Mỗi phông chữ có số liệu riêng và khi không được tối ưu hóa đúng cách, chúng có thể khác nhau từ nền tảng này đến nền tảng khác. Xem http://blog.typekit.com/2010/07/14/font-metrics-and-vertical-space-in-css/ để có giải thích tốt hơn về điều này.

Bạn có thể tự thay đổi phông chữ bằng cách sử dụng công cụ như http://fontforge.org/. Điều này là không dễ dàng mặc dù và có một số thử nghiệm và lỗi để làm cho nó đúng. Nó cũng có thể vi phạm giấy phép của phông chữ bạn đang sử dụng.

Lời khuyên của tôi: chọn phông chữ được tối ưu hóa tốt hơn để sử dụng trên web. Lấy bất kỳ phông chữ nào từ Typekit hoặc những thứ tương tự và tôi đặt cược bạn sẽ nhận được nhiều kết quả nhất quán hơn.

Answer 4

lẽ 'vertical-align:' có thể giúp đỡ,

hãy kiểm tra này fiddle

này sẽ giải thích sự khác biệt, tôi nghĩ rằng tất cả các trình duyệt có giá trị mặc định khác nhau,

ở đây tôi đã tạo ra 4 thẻ span khác nhau để hiển thị giá trị trên cùng, giữa, dưới cùng và giá trị mặc định (chưa được gán) của giá trị căn chỉnh theo chiều dọc,

Vui lòng thay đổi giá trị nếu điều đó giúp,

như bạn đang sử dụng hình ảnh trong các nút, hãy xác minh hình ảnh được thiết lập với 0 0 tức background:url(../img/header-login.png) no-repeat 0 0;

này sẽ làm cho hình ảnh từ 0 trái và 0 hàng đầu mà sẽ giúp bạn idnetify nếu và hình ảnh không phải là tạo đúng ..

Hãy trả lời nếu vấn đề không được giải quyết ..

Answer 5

Từ kinh nghiệm của tôi cho nhiều trình duyệt và các trang web đa nền tảng bạn thực sự cần thả các pixel trong phông chữ và bắt đầu sử dụng ems.

Dưới đây là một công cụ hữu ích bảng chuyển đổi:

http://pxtoem.com/

Hãy cho tôi biết nếu nó vẫn xảy ra bằng em. Hãy nhớ rằng các phông chữ khác nhau có các hành vi khác nhau và kích thước (cơ sở) mặc định cũng có thể khác nhau. Nếu bạn muốn đảm bảo kích thước chính xác, cùng với việc sử dụng 'em', bạn cũng nên sử dụng phông chữ openType và chèn nó vào CSS của bạn, có cùng phông chữ và kích thước trong bất kỳ màn hình hoặc trình duyệt nào.

Answer 6

Hệ điều hành có thể hiển thị phông chữ theo các cách khác nhau. Người ta có thể bắt đầu từ dưới và khác có thể bắt đầu từ đầu như thuật toán của họ khác nhau. Nếu vấn đề là CSS, nó sẽ không được giải quyết bởi một loại phông chữ khác.

tôi tìm thấy một câu hỏi khác tương tự như một, bạn có thể kiểm tra xem nó hoạt động cho tình hình của bạn: Mac vs. Windows Browser Font Height Rendering Issue