Hiển thị phông chữ trên Firefox trông rất khác với ví dụ: Chrome

Question

Tôi gặp sự cố với @font-face trong CSS. Phông chữ tôi đang sử dụng trông rất khác nhau trong mỗi trình duyệt.

Xem ví dụ này trong Firefox:

Và đây trong Chrome:

Tôi không biết những gì gây ra vấn đề này. Tôi đã cố gắng sử dụng text-rendering và tôi cũng đã thử thay đổi thứ tự của url -properties trong tuyên bố @font-face.

Tôi đang sử dụng Windows 7 Professional và Firefox V30.

Ai đó có thể thông báo cho tôi về lý do của sự cố này và cho tôi biết cách tôi có thể khắc phục sự cố này không?

Rất cám ơn.

// EDIT: Đây là @font-face khai Tôi đang sử dụng:

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

Như tôi đã viết ở trên tôi đã chơi với thứ tự của lệnh này.

Trong vấn đề cụ thể của tôi, bạn có thể thấy this page (footer) hiển thị sự cố.

Answer 1

Điều này có vẻ là vấn đề về phông chữ vì tất cả các cơ hội hoạt động cho người khác không ảnh hưởng đến sự cố. Chuyển sang phông chữ khác là giải pháp duy nhất trong thời điểm này.

Answer 2

Hầu hết các trình duyệt hiện đại đều sử dụng DirectWrite trên Windows để hiển thị văn bản, ngoại trừ Chrome. May mắn là họ đang triển khai nó ngay bây giờ và gần đây nó được đặt làm mặc định trong bản dựng Chrome mới nhất. Đó là tin tốt, tin xấu là nó vẫn có lỗi và không phải lúc nào cũng hiển thị đúng phông chữ. Bạn có thể xem đây có phải là sự cố hay không bằng cách tắt nó để xem có khắc phục được sự cố không.

Để tắt loại DirectWrite chrome://flags/ trong thanh địa chỉ và tìm tùy chọn có gắn nhãn 'Tắt DirectWrite'. Nếu điều này khắc phục được sự cố, bạn nên đăng nhập một lỗi với các ví dụ về hiển thị văn bản của bạn để nó có thể được sửa.

Bạn có thể đọc thêm về blog này trên blog Chrome tại http://blog.chromium.org/2014/07/chrome-37-beta-directwrite-on-windows.html.

Answer 3

tôi đã cùng một vấn đề và cố định nó với theo điều nhỏ

color:#505563; 
font-family: 'Dosis', sans-serif; 
text-shadow: 0px 1px 2px #eeeeee; 

Nói cách khác chỉ cần thêm bóng văn bản và nó sẽ làm việc tốt, chơi với các màu sắc đúng như một nghệ sĩ. Hãy thử điều này

text-shadow: 0px 0px 1px #eeeeee; 

Answer 4

Trình duyệt có các tính năng trợ năng ghi đè CSS. Đảm bảo rằng cài đặt văn bản hoặc trang không thu phóng. Xem https://support.mozilla.org/en-US/kb/font-size-and-zoom-increase-size-of-web-pages

Nếu không có gì khác ít nhất sẽ loại trừ một biến, làm cho việc gỡ lỗi hiệu quả hơn.