Tại sao @ font-face ném lỗi 404 lên các tệp woff?

Question

Tôi đang sử dụng @font-face trên trang web của công ty tôi và nó hoạt động/trông tuyệt vời. Ngoại trừ Firefox và Chrome sẽ phát ra lỗi 404 trên tệp .woff. IE không ném lỗi. Tôi có các phông chữ nằm ở gốc nhưng tôi đã thử với các phông chữ trong thư mục css và thậm chí cho toàn bộ url cho phông chữ. Nếu loại bỏ những phông chữ từ tập tin css của tôi, tôi không nhận được một 404 vì vậy tôi biết nó không phải là một lỗi cú pháp.

Ngoài ra, tôi sử dụng fontsquirrels công cụ để tạo ra các @font-face phông chữ và mã:

@font-face { 
    font-family: 'LaurenCBrownRegular'; 
    src: url('/laurencb-webfont.eot'); 
    src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

@font-face { 
    font-family: 'FontinSansRegular'; 
    src: url('/fontin_sans_r_45b-webfont.eot'); 
    src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

tôi đã trải qua triệu chứng này tương tự - 404 trên các tệp woff trong Chrome - và đang chạy một ứng dụng trên Windows Server với IIS 6.

Nếu bạn ở trong cùng một tình huống bạn có thể sửa chữa nó bằng cách làm như sau:

Giải pháp 1

"Chỉ cần thêm khai báo kiểu MIME sau qua IIS Manager (HTTP Headers tab của thuộc tính trang web): ứng dụng .woff/x-WOFF "

cập nhật: theo MIME Types for woff fonts và Grsmto kiểu MIME thực tế là application/x-font-WOFF (dành cho Chrome ít nhất). x-woff sẽ sửa lỗi Chrome 404, x-font-woff sẽ khắc phục các cảnh báo của Chrome.

Nhờ Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Giải pháp 2

Bạn cũng có thể thêm các loại MIME trong cấu hình web:

<system.webServer> 
    <staticContent> 
     <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type --> 
     <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
    </staticContent>  
    </system.webServer> 

Answer 2

Giải quyết nó:

tôi đã phải sử dụng Mo'Bulletproofer method

Answer 3

Điều này có thể rõ ràng , nhưng nó đã lừa tôi với 404s một số lần ... Hãy chắc chắn rằng các phông chữ f các quyền cũ hơn được đặt chính xác.

Answer 4

Thực ra câu trả lời @Ian Robinson hoạt động tốt nhưng Chrome sẽ tiếp tục phàn nàn với thông điệp rằng: "Resource hiểu là Font nhưng chuyển với kiểu MIME application/x-WOFF"

Nếu bạn nhận được điều đó, bạn có thể thay đổi từ

application/x-WOFF

để

application/x -font -woff

và bạn sẽ không có bất kỳ giao diện điều khiển lỗi Chrome nữa!

(thử nghiệm trên Chrome 17)

Answer 5

Đồng thời kiểm tra trình ghi đè URL của bạn. Nó có thể ném 404 nếu một cái gì đó "lạ" đã được tìm thấy.

Answer 6

Giải pháp cho IIS7

Tôi cũng đã xem qua cùng một vấn đề. Tôi nghĩ rằng việc thực hiện cấu hình này từ cấp độ máy chủ sẽ tốt hơn vì nó áp dụng cho tất cả các trang web.

1. Đến IIS nút gốc và nhấp đúp vào liên kết "Các loại MIME" tùy chọn cấu hình

2. Bấm "Add" trong các action panel phía trên bên phải.

3. Thao tác này sẽ hiển thị hộp thoại. Thêm phần mở rộng tệp .off và chỉ định "application/x-font-woff" làm loại MIME tương ứng.

Thêm MIME cho .woff tên file mở rộng

Dưới đây là những gì tôi đã làm để giải quyết vấn đề trong IIS 7

Answer 7

Chạy IIS Server Manager (chạy lệnh: inetmgr) Mở Mime Các loại và thêm sau

Tên tập tin mở rộng: .woff

MIME loại: application/octet-stream

Answer 8

Tôi đã thử một tấn những thứ xung quanh quyền, kiểu MIME, vv, nhưng đối với tôi cuối cùng là web.config đã gỡ bỏ trình xử lý tệp tĩnh trong IIS và sau đó thêm nó một cách rõ ràng vào các thư mục có các tệp tĩnh. Ngay sau khi tôi thêm một nút vị trí cho thư mục của tôi và thêm trình xử lý trở lại, các yêu cầu ngừng nhận được 404.

Answer 9

Nếu bạn không có quyền truy cập vào cấu hình máy chủ web của mình, bạn cũng có thể chỉ RENAME tệp phông chữ để kết thúc bằng svg (nhưng giữ lại định dạng). Hoạt động tốt cho tôi trong Chrome và Firefox.

Answer 10

Nếu bạn đang sử dụng CodeIgniter dưới IIS7:

Trong file web.config của bạn, thêm WOFF để mô hình

<rule name="Rewrite CI Index"> <match url=".*" /> <conditions> <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" /> </conditions> <action type="Rewrite" url="index.php/{R:0}" /> </rule>

Hy vọng nó sẽ giúp!

Answer 11

IIS Mime Type:.woff font/x-woff (không phải ứng dụng/x-woff, hoặc application/x-font-woff)

Answer 12

Câu trả lời cho bài đăng này rất hữu ích và tiết kiệm thời gian rất lớn. Tuy nhiên, tôi thấy rằng khi sử dụng FontAwesome 4.50, tôi phải thêm cấu hình bổ sung cho loại tiện ích mở rộng woff2 cũng như được hiển thị bên dưới các yêu cầu khác cho loại woff2 đã đưa ra lỗi 404 trong Công cụ dành cho nhà phát triển của Chrome trong Bảng điều khiển> Lỗi.

Theo nhận xét của S.Serp, cấu hình bên dưới phải được đặt trong thẻ <system.webServer>.

<staticContent> 
    <remove fileExtension=".woff" /> 
    <!-- In case IIS already has this mime type --> 
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
    <remove fileExtension=".woff2" /> 
    <!-- In case IIS already has this mime type --> 
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" /> 
</staticContent> 

Answer 13

Ngoài câu trả lời của Ian, tôi phải cho phép tiện ích mở rộng phông chữ trong mô-đun lọc yêu cầu làm cho nó hoạt động.

<system.webServer> 
    <staticContent> 
    <remove fileExtension=".woff" /> 
    <remove fileExtension=".woff2" /> 
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" /> 
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" /> 
    </staticContent> 
    <security> 
     <requestFiltering> 
      <fileExtensions> 
       <add fileExtension=".woff" allowed="true" /> 
       <add fileExtension=".ttf" allowed="true" /> 
       <add fileExtension=".woff2" allowed="true" /> 
      </fileExtensions> 
     </requestFiltering> 
    </security>  
</system.webServer> 

Answer 14

Nếu vẫn không hoạt động sau khi thêm loại MIME, vui lòng kiểm tra xem "Xác thực ẩn danh" có được bật trong phần Xác thực trên trang web hay không và chọn "Nhận dạng hồ bơi ứng dụng" theo ảnh chụp màn hình đã cho.