Firefox không thể kết xuất các biểu tượng từ bộ webfont Font Awesome

Trong Firefox (Windows 7), các biểu tượng và glyph được gọi từ gói Font Awesome không hiển thị đúng. Một ví dụ về điều này có thể được nhìn thấy trên trang web của Khan Academy. Bên dưới video, các biểu tượng được hiển thị dưới dạng hộp có mã hex trong đó. Điều này có nghĩa là nó không được Firefox tải xuống.

Cách thức xuất hiện trên Chrome (Windows 7), Safari (Mac OS X) và Không gỉ (Mac OS X):

Tôi đã tìm thấy câu hỏi này trên Stack Overflow có thể giải thích lý do tại sao điều này xảy ra - CSS sử dụng các dấu ngoặc đơn để đặt vị trí src của phông chữ. Tuy nhiên, tôi không có quyền truy cập ghi vào máy chủ của Khan Academy vì vậy tôi không thể sửa đổi trang web thực tế. Tôi muốn biết nếu điều này có thể được sửa trong Firefox, và làm thế nào. Tôi có thể chạy các tập lệnh Greasemonkey nếu điều đó có ích. Tôi đã thử tải xuống phông chữ thủ công và thêm nó vào thư mục Phông chữ của Windows nhưng điều này không có ích.

Để tham khảo, CSS thiết lập phông chữ này (không được Firefox xử lý đúng cách) là:

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

[class^="icon-"]:before,
[class*=" icon-"]:before
{
  font-family:FontAwesome;
  font-weight:normal;
  font-style:normal;
  display:inline-block;
  text-decoration:inherit
}

Cập nhật: Tôi thấy rằng Firefox hiển thị chính xác các biểu tượng dựa trên phông chữ trong trang web của gói Font Awesome (được liên kết ở trên). Khi kiểm tra CSS và so sánh với CSS của Khan Academy, tôi thấy rằng cả hai mã này hoàn toàn giống nhau ngoại trừ không có dấu chấm phẩy sau thuộc tính cuối cùng cho CSS của KA (nếu bạn bỏ qua thực tế là nó bị nén). Có phải thiếu dấu chấm phẩy gây ra vấn đề này?

Vấn đề được mô tả trong câu hỏi đã được cố định bởi Học viện Khan bằng cách thay đổi tất cả các đường từ ./đến /fonts/(ví dụ ./fontawesome-webfont.ttfthay đổi /fonts/fontawesome-webfont.ttf). Dường như với tôi rằng Firefox không thể đọc các tệp từ thư mục "chấm" đặc biệt (chỉ đơn giản đề cập đến thư mục hiện tại).

PS: Việc thiếu dấu chấm phẩy trong CSS sau thuộc tính cuối cùng không gây ra vấn đề này.

Ý kiến ​​khác:

Chỉnh sửa của bạn về .tiền tố là một vấn đề máy chủ, không phải cách Firefox xử lý các tệp. KA đã tham chiếu các tệp phông chữ từ vị trí sai - ngẫu nhiên

Sai! Các phông chữ hoạt động chính xác trong ba trình duyệt khác như tôi đã đề cập từ lâu, điều đó có nghĩa là các phông chữ nằm ở vị trí chính xác. Đó rõ ràng là vấn đề của Firefox với ./đường dẫn như tôi đã giải thích, điều đó buộc KA phải di chuyển các tệp phông chữ đến một vị trí mới không cần ./, cho phép Firefox cũng đọc chính xác các tệp phông chữ. Vì vậy nó là một vấn đề về cách Firefox xử lý các tập tin.

Có lẽ không phải là câu trả lời cho câu hỏi được đặt ra, nhưng đủ liên quan để giúp những người kết thúc ở đây với một vấn đề hơi khác tạo ra kết quả tương tự như trong ảnh chụp màn hình.

Firefox chặn việc sử dụng phông chữ trên một miền (phụ) khác

Cũng đọc các bình luận trên bài viết đó, họ đưa ra lời khuyên tốt.

Tôi đã thực hiện các thay đổi đường dẫn để chạy IE, Firefox và Chrome một cách chính xác, như sau: ( URL để xem )

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