lỗi CSS3111 khi nhúng FontAwesome phông chữ trong IE8

Question

Tôi đang sử dụng FontAwesome (http://fortawesome.github.com/Font-Awesome/) như một phông chữ web trên trang của mình:

http://www.jungledragon.org/apps/jd3/

Vấn đề của tôi là phông chữ không tải được trong IE8 (chế độ tiêu chuẩn), thay vào đó các khối vuông được hiển thị. Vì các biểu tượng này rất cần thiết cho thiết kế, tôi mong muốn sửa lỗi này.

Tôi đã nghiên cứu rất nhiều câu hỏi và câu trả lời rồi, vì vậy hãy để tôi cho bạn biết những gì tôi đã làm để khắc phục sự cố này. Trước tiên, tôi đang sử dụng định dạng khuyến khích cho nhúng phông chữ này:

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

Đây là tiêu chuẩn de facto để tải phông chữ x-trình duyệt, và cùng đầu ra như được tạo ra bởi các công cụ như FontSquirrel. Thư mục kiểu liên quan đến thư mục CSS của tôi và phông chữ này sẽ tải trong tất cả các trình duyệt ngoại trừ IE8.

Thứ hai, tôi đã bật nguồn gốc tên miền chéo (CORS), vì vậy đó chắc chắn không phải là vấn đề.

Một số người đề nghị tải html5 shiv có thể ảnh hưởng đến việc tải IE8 phông chữ, nhưng việc loại bỏ tải shiv alltogether vẫn không tạo sự khác biệt.

Trang web đang chạy trên Apache2, việc thêm các loại mime dường như không tạo ra bất kỳ sự khác biệt nào cho kết quả. Ngoài ra, tôi có thể xác nhận rằng tôi có thể tải xuống tệp eot từ IE8 bằng cách sử dụng đường dẫn trực tiếp, vì vậy tệp chắc chắn có thể truy cập được.

Tôi không biết mình đang làm gì sai, nhưng nó phải là thứ gì đó ở phía tôi. Lý do rất đơn giản: việc mở trang web FontAwesome chính thức từ IE8 sẽ tải phông chữ tốt. Ngoài ra, phông chữ phụ mà tôi đang sử dụng (phông chữ được sử dụng trong biểu tượng của trang web) cũng chỉ hiển thị tốt. Phông chữ thứ hai xuất phát từ các webfont của Google, trong khi phông chữ fontawesome được lưu trữ trên cùng một miền với trang web.

Tôi đang hết ý tưởng về cách giải quyết vấn đề này, bất kỳ manh mối nào?

Cập nhật: Tôi nên thêm rằng trong phát triển thanh công cụ IE, đây là lỗi Tôi nhận:

CSS3111: @ font-face gặp phải lỗi không rõ. fontawesome-webfont.eot

tôi tìm thấy bài viết này thảo luận về các lỗi:

http://www.marinbezhanov.com/web-development/16/how-to-embed-webfonts-properly-and-how-to-solve-the-ambiguous-css3111-font-face-encountered-unknown-error/

... nhưng tôi không thấy một giải pháp bên trong giúp tôi.

Answer 1

Cuối cùng, câu trả lời này giải quyết vấn đề của tôi:

https://stackoverflow.com/a/12459447/80969

tôi phải chỉnh sửa file ttf đi kèm với các gói fontawesome tải xuống bằng chương trình chỉnh sửa phông chữ tối nghĩa. Trong đó tôi đổi tên thành "Tên phông chữ của con người" giống như tất cả các trường "tên" khác. Tiếp theo, tôi đã sử dụng http://www.font2web.com/ để tạo tệp .eot mới và tích hợp nó trong dự án, giữ mọi thứ khác giống nhau. Và mau, nó hoạt động!

Dường như phiên bản phông chữ tuyệt vời của tôi có vấn đề được tạo ngay trong bản tải xuống.

Answer 2

Có thể đáng để kiểm tra http://fontface.codeandmore.com/blog/ie-7-8-error-with-eot-css3111/.