font-face với kiểu MIME sai trong Chrome

Question

Đây là @font-face khai Tôi đã sử dụng:

@font-face { 
    font-family: SolaimanLipi; 
    src: url("font/SolaimanLipi_20-04-07.ttf"); 
} 

này đang làm việc một cách hoàn hảo trong Firefox nhưng không có trong Chrome. Sau khi "kiểm tra phần tử", tôi nhận được thông báo sau:

Tài nguyên được hiểu là phông chữ nhưng được truyền bằng ứng dụng loại MIME/octet-stream.

Mọi đề xuất sẽ được đánh giá cao.

Answer 1

Như thường lệ, các trình duyệt khác nhau có các nhu cầu khác nhau. Đây là một tuyên bố trình duyệt @fontface chéo, lấy từ Paul Irish blog -

@font-face { 
    font-family: 'Graublau Web'; 
    src: url('GraublauWeb.eot'); 
    src: local('☺'), 
     url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype'); 
} 

.eot được cho IE, phần còn lại của các trình duyệt sử dụng hoặc .woff hoặc .ttf Nếu bạn cần để tạo ra các loại khác nhau từ font nguồn, bạn có thể sử dụng font Squirrel của font-face generator

bạn cũng cần một .htaccess đến vị trí của các phông chữ thêm các loại sau đây:

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

Answer 2

nếu bạn có thể chỉnh sửa một tập tin .htaccess bạn nên thử một đ

addType font/ttf .ttf 

nếu không bạn có thể sử dụng một phông chữ svg/svgz thay

Answer 3

Bạn có thể bỏ qua các cảnh báo và có thể muốn xem xét bài này về chủ đề này, Proper MIME type for fonts

nào cũng đề cập đến sau đây:

"Lưu ý: Vì không có loại MIME được xác định cho phông chữ TrueType, OpenType, và WOFF, loại MIME của tệp được chỉ định không phải là được xem xét. "

nguồn: http://developer.mozilla.org/en/css/@font-face

Answer 4

file font của bạn đang không được trasferred với kiểu MIME thích hợp. Đây là sự cố cấu hình máy chủ web có thể dễ dàng được khắc phục.

Đối với nginx, sáp nhập này với cấu hình loại hiện có, thường được tìm thấy trong thư mục /etc/nginx:

types { 
   application/vnd.ms-fontobject    eot; 
   application/x-font-woff    woff; 
   font/otf    otf; 
   font/ttf    ttf; 
} 

Đối với Apache, thêm những dòng này để .htaccess tìm thấy trong tài liệu gốc của bạn:

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

Answer 5

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

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