Phông chữ tùy chỉnh đôi khi hiển thị bằng chữ in nghiêng trong IE8/IE7

Question

Trong IE7 và IE8, khi sử dụng phông chữ web tùy chỉnh, văn bản đôi khi được in nghiêng, ngay cả khi tôi đặt rõ ràng font-style: normal. Vấn đề là rời rạc - nó sẽ làm cho tốt một vài lần, sau đó tôi làm mới và tất cả mọi thứ là in nghiêng, sau đó tôi làm mới và nó trở lại bình thường.

Tôi đang sử dụng @font-face tuyên bố này:

@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DIN'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

Theres a comment trên this article cho biết nó có thể là về thứ tự của các @font-face tờ khai: tuy nhiên điều duy nhất mà dừng lại các vấn đề đã được loại bỏ tờ khai nghiêng hoàn toàn .

Another Stack Overflow answer đề xuất sử dụng trình tạo phông chữ Font Squirrel @; Tuy nhiên, tôi không thể làm điều này vì các tệp phông chữ web tôi đang sử dụng có DRM.

Có cách nào để giải quyết vấn đề này mà không xóa hoàn toàn các khai báo nghiêng không?

CẬP NHẬT: Khi điều tra thêm, có vẻ vấn đề này cũng ảnh hưởng đến IE8, không chỉ ở chế độ tương thích.

Answer 1

Đối với mỗi tên @font-facefont-family, hãy tạo tên tùy chỉnh thay thế.

Ví dụ:

@font-face { 
    font-family: 'DINnormal'; 
    src: url('fonts/DINWeb.eot'); 
    src: url('fonts/DINWeb.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb.woff') format('woff'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINbold'; 
    src: url('fonts/DINWeb-Bold.eot'); 
    src: url('fonts/DINWeb-Bold.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Bold.woff') format('woff'); 
    font-weight: bold; 
    font-style: normal; 
} 
@font-face { 
    font-family: 'DINitalic'; 
    src: url('fonts/DINWeb-Ita.eot'); 
    src: url('fonts/DINWeb-Ita.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-Ita.woff') format('woff'); 
    font-weight: normal; 
    font-style: italic; 
} 
@font-face { 
    font-family: 'DINboldItalic'; 
    src: url('fonts/DINWeb-BoldIta.eot'); 
    src: url('fonts/DINWeb-BoldIta.eot?#iefix') format('embedded-opentype'), 
     url('fonts/DINWeb-BoldIta.woff') format('woff'); 
    font-weight: bold; 
    font-style: italic; 
} 

Sau những quy tắc CSS được định nghĩa, sau đó bạn có thể bao gồm quy tắc CSS cụ thể:

li { 
    font: 18px/27px 'DINnormal', Arial, sans-serif; 
} 

Answer 2

Nếu, như tôi, bạn đã xem qua câu hỏi này khi gặp phải sự cố tương tự sử dụng phông chữ TypeKit, this entry from the TypeKit blog giải thích cách bạn có thể buộc các tên font-family riêng cho mỗi trọng lượng & kiểu phông chữ TypeKit để giải quyết.

Answer 3

Tôi đã gặp sự cố tương tự, phông chữ web được hiển thị bằng chữ nghiêng khi sử dụng IE8 (Emulator), sau khi đào và đào tôi thấy một bài viết đề xuất trình mô phỏng đôi khi có thể gây hiểu nhầm, đặc biệt khi nói đến webFonts. đề nghị đã thử các trang web trong IE8 thực tế, như tôi đang sử dụng một cửa sổ 7 máy tôi đã không thể tải về thực sự vì vậy tôi sử dụng trang web này được gọi là http://www.browserstack.com/ (Không thử nghiệm hoặc trình duyệt giả mạo. Kiểm tra trong trình duyệt thực bao gồm Internet Explorer 6 , 7, 8, 9, 10 và 11)

và tôi nhận thấy phông chữ của tôi không nghiêng nữa: D

đây là liên kết đến bài viết tôi đọc,

http://blog.typekit.com/2013/03/14/the-dangers-of-cross-browser-testing-with-ie9s-browser-modes/

Hy vọng điều này sẽ giúp bạn guys, nếu tôi đi qua một cái gì đó như thế này khi nghiên cứu nó sẽ thực sự đã cứu tôi một vài giờ