CSS @ font-face không hoạt động trong tức là

Question

Tôi có CSS ​​sau hoạt động trong Firefox chứ không phải IE. Rõ ràng, các phông chữ nằm trong thư mục. Bất kỳ đề xuất?

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: Futura, Verdana, Arial, sans-serif; 
    font-size:1.2em; 
    height: 40px; 
} 

Answer 1

Bạn có thể sử dụng Google Font API. Họ nói nó hoạt động từ IE 6 trở lên. (Tôi đã không kiểm tra này.)

cơ sở hạ tầng phục vụ của Google mất sóc chuyển đổi font sang một định dạng tương thích với bất kỳ trình duyệt hiện đại (bao gồm cả trình duyệt Internet Explorer 6 trở lên), ...

Answer 2

Từ http://readableweb.com/mo-bulletproofer-font-face-css-syntax/

Bây giờ phông chữ web được hỗ trợ trong Firefox 3.5 và 3.6, Internet Explorer , Saf ari, Opera 10.5 và Chrome, tác giả web phải đối mặt với các câu hỏi mới : Các triển khai này khác nhau như thế nào? Kỹ thuật CSS nào sẽ chứa tất cả? Nhà phát triển Firefox John Daggett gần đây đã đăng một bài đăng nhỏ về các vấn đề này và các giải pháp được khám phá. Để trả lời bài đăng đó, và để đáp ứng, đặc biệt, công việc của Paul Irish, tôi đã đưa ra cú pháp CSS phông chữ @ sau đây. Đã được thử nghiệm trong tất cả các trình duyệt được đặt tên ở trên bao gồm IE 8, 7, và 6. Cho đến nay, rất tốt. Sau đây là trang thử nghiệm khai báo phông chữ Droid miễn phí dưới dạng phông chữ hoàn chỉnh với Chữ thường, Nghiêng, Đậm, và Chữ in nghiêng. Xem nguồn để biết chi tiết. Cảnh báo: Hãy lưu ý rằng Web có thể đọc đã phát hành đầu tiên @ phần mềm liên quan đến phông chữ tiện ích để tạo tệp EOT nguyên bản được nén một cách nhanh chóng và dễ dàng. Nó có trang web riêng và ngoài tiện ích, gói tải xuống chứa tài liệu hữu ích, phông chữ thử nghiệm và trang kiểm tra EEOT. Nó được gọi là EOTFAST Nếu bạn đang làm việc với @ font-face, đó là điều bắt buộc phải có.

Dưới đây là Các Mo’Bulletproofer Code:

@font-face{ /* for IE */ 
    font-family:FishyFont; 
    src:url(fishy.eot); 
} 
@font-face { /* for non-IE */ 
    font-family:FishyFont; 
    src:url(http://:/) format("No-IE-404"),url(fishy.ttf) format("truetype"); 
} 

Answer 3

Tôi đọc rất nhiều bài hướng dẫn gợi ý hacks, vì vậy tôi đã đưa ra giải pháp này tôi nghĩ là tốt hơn ... Có vẻ như để làm việc tốt.

@font-face { 
    font-family: MyFont; src: url('myfont.ttf'); 
} 
@font-face{ 
    font-family: MyFont_IE; src: url('myfont.eot'); 
} 
.my_font{ 
    font-family: MyFont, MyFont_IE, Arial, Helvetica, sans-serif; 
} 

Answer 4

Nếu bạn vẫn gặp rắc rối với điều này, đây là giải pháp của bạn:

http://www.fontsquirrel.com/fontface/generator

Nó hoạt động tốt hơn/nhanh hơn so với bất kỳ font-máy phát điện khác và cũng có thể đưa ra một ví dụ để bạn có thể sử dụng.

Answer 5

Squirrel phông chữ không hoạt động đối với tôi. Tôi đã tải lên một phông chữ để chuyển đổi sang nhiều định dạng phông chữ để hỗ trợ IE. Nó thực hiện đảo ngược, mà tôi đã có thể tải xuống. Sau đó tôi đã tải nội dung lên máy chủ của tôi theo thông số kỹ thuật. Tôi chỉ có thể có được Firefox hoặc IE để làm việc nhưng không phải cả hai. Giải pháp làm việc cho tôi là liên kết The Bullet Bulleterer ở trên.

Answer 6

Đối với IE> 9 bạn có thể sử dụng các giải pháp sau đây:

@font-face { 
    font-family: OpenSansRegular; 
    src: url('OpenSansRegular.ttf'), url('OpenSansRegular.eot'); 
} 

Answer 7

Tôi đã tìm thấy nếu tờ khai font face là bên trong một truy vấn phương tiện truyền thông IE (cả cạnh và 11) sẽ không tải chúng; họ cần phải được điều đầu tiên khai báo trong stylesheet và không bọc trong một truy vấn phương tiện truyền thông

Answer 8

Thay đổi theo dưới đây

@font-face { 
    font-family: "Futura"; 
    src: url("../fonts/Futura_Medium_BT.eot"); /* IE */ 
    src: local("Futura"), url("../fonts/Futura_Medium_BT.ttf") format("truetype"); /* non-IE */ 
} 

body nav { 
    font-family: "Futura"; 
    font-size:1.2em; 
    height: 40px; 
}