Google cảnh báo: Resource hiểu là Font nhưng chuyển với kiểu MIME application/octet-stream

Question

Tôi có một cảnh báo trong Google cho font-face của tôi:

Resource hiểu là Font nhưng chuyển với ứng dụng kiểu MIME/octet- luồng: ".../Nội dung/Phông chữ/biểu tượngFont.ttf".

Nó hoạt động ngay cả khi tôi có cảnh báo này nhưng tôi muốn tránh cảnh báo này.

Đây là tuyên bố của tôi:

@font-face { 
    font-family: 'iconFont'; 
    src: url('../Fonts/iconFont.eot?#iefix') format('embedded-opentype'), 
    url('../Fonts/iconFont.svg#iconFont') format('image/svg+xml'), 
    url('../Fonts/iconFont.woff') format('font/x-woff'), 
    url('../Fonts/iconFont.ttf') format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 

Tôi đã tìm kiếm trên bài viết khác nhưng không may mắn cho đến nay.

Xin lưu ý rằng máy chủ của tôi là IIS của Microsoft.

Bất kỳ ý tưởng nào làm cách nào để tránh cảnh báo này?

Cảm ơn.

Answer 1

một cách tiếp cận khác ở đây: http://zduck.com/2013/google-chrome-and-woff-font-mime-type-warnings/

sử dụng các cài đặt bên dưới trên web của bạn.cấu hình:

<system.webServer> 
<staticContent> 
    <mimeMap fileExtension=".woff" mimeType="application/font-woff"/> 
</staticContent> 
</system.webServer> 

Answer 2

Bạn cần phải thêm các loại sau đây để một .htaccess/IIS:

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 
AddType application/font-woff .woff 

Cập nhật loại .woff từ:

AddType application/x-font-woff .woff 

(Nhờ @renadeen trong ý kiến ​​dưới đây để chỉ này.)

Kiểm tra câu trả lời của tôi cho một câu hỏi tương tự tại đây: Font Face not loaded

Lấy từ đây: font-face problem in chrome.

Answer 3

Cảm ơn câu trả lời ở trên @ 97ldave, bạn có thể thêm các loại này vào phần cấu hình IIS webServer nếu bạn không muốn thêm chúng trực tiếp vào các loại MIME trong thiết lập IIS của bạn. Phần sau đây trình bày một ví dụ về việc chỉ thêm kiểu .woff bị thiếu trong cấu hình của chúng ta. Điều này đã khắc phục sự cố với phông chữ không xuất hiện trong phiên bản Safari mới nhất (6.0.3) trên iMac của tôi.

<system.webServer> 
<staticContent> 
    <remove fileExtension=".woff" /> 
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
</staticContent> 
</system.webServer> 

Nhờ Jon Samwell (đồng nghiệp của tôi) đã tìm ra điều này.

Answer 4

Đối với Nginx: (Đường dẫn: /etc/nginx/mime.types)

font/ttf       ttf; 
font/otf       otf; 
application/x-font-woff   woff; 

Bạn không cần application/vnd.ms-fontobject eot; vì nó đã tồn tại.

Sau đó khởi động lại Nginx: service nginx restart

Done.

Answer 5

loại MIME đúng cho các phông chữ là:

application/font-ttf    ttf; 
application/font-otf    otf; 
application/font-woff    woff; 

Answer 6

Nếu bạn chạy một máy chủ với nodeJS, đây là một mô-đun đẹp để ánh xạ kiểu MIME của bạn

https://github.com/broofa/node-mime

var mime = require('mime'); 

mime.lookup('/path/to/file.txt');   // => 'text/plain' 
mime.lookup('file.txt');     // => 'text/plain' 
mime.lookup('.TXT');      // => 'text/plain' 
mime.lookup('htm');      // => 'text/html' 

mime.extension('text/html');     // => 'html' 
mime.extension('application/octet-stream'); // => 'bin' 

Answer 7

Nhờ @ the-senator và @ 97ldave cho câu trả lời của họ

cho tôi những lỗi hoàn toàn biến mất chỉ sau khi thêm những dòng này vào web.config

<system.webServer> 
<staticContent> 
     <remove fileExtension=".woff" /> 
     <mimeMap fileExtension=".woff" mimeType="application/x-font" /> 
     <remove fileExtension=".woff2" /> 
     <mimeMap fileExtension=".woff2" mimeType="application/x-font" /> 
    </staticContent> 
</system.webServer>