Phông chữ Tuyệt vời không hoạt động trong Firefox & IE

Question

Tôi gặp sự cố với phông chữ tuyệt vời được đưa vào trang web wordpress. Trong Firefox và IE, các biểu tượng sẽ không hiển thị, tuy nhiên, trong Chrome & Safari, nó hoạt động tốt.

Tôi đã tìm thấy "giải pháp" cho biết tôi cần một .htaccess với nội dung nhất định để cung cấp hỗ trợ cho các trình duyệt này, tuy nhiên, nếu tôi sử dụng phương pháp này, Safari và Chrome đột nhiên gặp sự cố và Firefox và IE vẫn không đang làm việc.

Có ai có thêm ý tưởng nào không?

Dưới đây là thông báo lỗi đưa ra bởi các firefox log lỗi dev khi tải trang web của tôi:

Fehler: font tải: tải về thất bại (font-family: "icomoon" phong cách: cân nặng bình thường: căng bình thường : bình thường src chỉ số: 2): URI xấu hoặc truy cập cross-site không được phép nguồn: http://mysite.de/wp-content/themes/heat/fonts/icomoon/icomoon.woff Quelldatei: http://mysite.de/wp-content/themes/heat/style.css Zeile: 0 Quelltext: @ font-face {font-family: "icomoon"; font-style: bình thường; font-weight: bình thường; Định dạng src: url ("phông chữ/icomoon/icomoon.eot? #iefix") ("nhúng-opentype"), url ("phông chữ/icomoon/icomoon.svg # icomoon") định dạng ("svg"), url (" fonts/icomoon/icomoon.woff ") định dạng (" woff "), định dạng url (" fonts/icomoon/icomoon.ttf ") (" truetype "); }

Cảm ơn sự giúp đỡ của bạn!

P.S. Các biểu tượng trên phông chữ trang web tuyệt vời hoạt động tốt trong FF bằng cách này.

• CẬP NHẬT *

ok sau khi đọc rất nhiều bài viết diễn đàn về vấn đề này tôi đã đi đến kết luận sau: hầu hết mọi người đang có vấn đề này bởi vì họ đang tải phông chữ của họ từ một máy chủ bên ngoài . bằng cách thêm mã .htaccess để cho phép FF thực hiện điều đó, họ đang giải quyết vấn đề của họ. bây giờ, vì tôi đang tải phông chữ từ máy chủ của riêng mình, phương pháp tiếp cận .htaccess không giúp tôi. những gì đã được loại bỏ các thông báo lỗi được hiển thị ở trên tuy nhiên, đã được thay đổi đường dẫn đến phông chữ trong css từ một liên quan đến một đường dẫn tuyệt đối. bây giờ điều buồn cười là - thông báo lỗi không hiển thị nữa khi tải trang web, nhưng các biểu tượng thì không! vẫn không có thay đổi, nhưng không có thông báo lỗi. Tôi bối rối!

• CẬP NHẬT 2 *

Tôi tìm thấy một sửa chữa -

Sau khi thay đổi tất cả các đường dẫn trong css từ liên quan đến tuyệt đối (tức là www.mysite.de/fonts/... thay vì chỉ/phông chữ/...) VÀ thêm tệp .htaccess có chứa các dòng sau:

<FilesMatch ".(ttf|otf|eot|woff)$"> 
<IfModule mod_headers.c> 
Header set Access-Control-Allow-Origin "*" 
</IfModule> 
</FilesMatch> 

vào thư mục/phông chữ, mọi thứ hoạt động tốt trong Firefox, Chrome và Safari. Chưa có cơ hội để kiểm tra IE, nhưng có vẻ như đây là vấn đề.

Hy vọng người nào đó gặp phải sự cố tương tự sẽ nhận được trợ giúp từ việc này.

Answer 1

Nếu bạn thích tôi, sửa đổi tệp web.config là thứ bạn không được phép chạm vào.

Thử lưu trữ tất cả các tệp phông chữ (.eot, .ttf, v.v.) vào thư mục cục bộ của riêng chúng và liên kết chúng cục bộ thay vì CDA FontAwesome. Xóa nó trong IE và FF cho tôi mỗi lần.

@font-face{ font-family:'FontAwesome'; src:url('../_fonts/fontawesome-webfont.eot'); } 

Answer 2

Tôi biết đây là một bài đăng cũ, nhưng nó đã giúp tôi tìm ra một số vấn đề.

Tôi đã bật cấu hình apache chuẩn và mod_headers.

Tôi có một thư mục /font/ trong DOCUMENT_ROOT, thêm một .htaccess trong thư mục đó (<DOCUMENT_ROOT>/font/.htaccess) với các nội dung được đề xuất bởi Markus làm việc trên tất cả các trình duyệt:

<FilesMatch ".(ttf|otf|eot|woff)$"> 
    <IfModule mod_headers.c> 
    Header set Access-Control-Allow-Origin "*" 
    </IfModule> 
</FilesMatch> 

Answer 3

Bạn cần phải thêm một quy tắc địa phương nếu bạn muốn Firefox sử dụng phông chữ khi được cài đặt trên máy tính. Xem https://developer.mozilla.org/Web/CSS/@font-face.

@font-face { font-family: 'FontAwesome'; src: local(''FontAwesome'); } 

Answer 4

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css"> 

Thêm dòng này vào file header.php của theme mà bạn đang sử dụng. Sửa chữa này đã làm việc cho tôi.