Tôi đang sử dụng @font-facetrên trang web của công ty tôi và nó hoạt động / trông rất tuyệt. Ngoại trừ Firefox và Chrome sẽ đưa ra lỗi 404 trên .wofftệp. 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í cung cấp toàn bộ url cho phông chữ. Nếu xóa các phông chữ đó khỏi tệp css của tôi, tôi không nhận được 404 vì vậy tôi biết đó không phải là lỗi cú pháp.

Ngoài ra, tôi đã sử dụng công cụ @font-facephông chữ để tạo 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;
}

Tôi đã gặp phải triệu chứng 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 tình huống tương tự, bạn có thể khắc phục bằng cách làm như sau:

Giải pháp 1

"Chỉ cần thêm các khai báo loại MIME sau thông qua Trình quản lý IIS (tab Tiêu đề HTTP của thuộc tính trang web): .woff application / x-woff "

Cập nhật: theo Loại MIME cho phông chữ woff và Grsmto loại MIME thực tế là application / x-font-woff (ít nhất là cho Chrome). x-woff sẽ sửa lỗi Chrome 404, x-font-woff sẽ sửa các cảnh báo của Chrome.

Kể từ năm 2017 : Phông chữ Woff hiện đã được chuẩn hóa như một phần của đặc tả RFC8081 cho loại mime font/woffvà font/woff2.

Cảm ơn 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="font/woff" />
    </staticContent>    
  </system.webServer>

Câu trả lời cho bài viết này rất hữu ích và tiết kiệm thời gian lớn. Tuy nhiên, tôi thấy rằng khi sử dụng FontAwesome 4.50, tôi phải thêm một cấu hình bổ sung cho woff2loại tiện ích mở rộng cũng như hiển thị bên dưới các yêu cầu khác chowoff2 loại đã gây 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 nên được đặt trong <system.webServer>thẻ.

<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>

Trên thực tế, câu trả lời @Ian Robinson hoạt động tốt nhưng Chrome sẽ tiếp tục khiếu nại với thông báo đó: " Tài nguyên được hiểu là Phông chữ nhưng được chuyển bằng ứng dụng loại MIME / x-woff "

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

ứng dụng / x-woff

đến

ứng dụng / x -font -woff

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

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

Giải pháp cho IIS7

Tôi cũng gặp vấn đề tương tự. Tôi nghĩ rằng 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. Đi đến nút gốc IIS và bấm đúp vào tùy chọn cấu hình "Loại MIME"

2. Nhấp vào liên kết "Thêm" trong bảng Hành động ở trên cùng bên phải.

3. Điều này sẽ đưa ra một hộp thoại. Thêm phần mở rộng tệp .woff và chỉ định "application / x-font-woff" là loại MIME tương ứng.

Thêm loại MIME cho phần mở rộng tên tệp .woff

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

Ngoài câu trả lời của Ian, tôi phải cho phép các phần 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>

Chạy IIS Server Manager (lệnh chạy: inetmgr) Mở Mime Type và thêm vào sau

Phần mở rộng tên tệp: .woff

Loại MIME : ứng dụng / octet-stream

Tôi đã thử rất nhiều thứ xung quanh các quyền, các loại mime, v.v. Ngay sau khi tôi thêm một nút vị trí cho thư mục của mình và thêm trình xử lý trở lại, các yêu cầu đã ngừng nhận 404s.

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

Trong tệp web.config của bạn, thêm woff vào mẫu

<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ó giúp !

Điều này có thể rõ ràng, nhưng nó đã tăng gấp ba lần với 404 lần ... Hãy đảm bảo rằng các quyền của thư mục phông chữ được đặt chính xác.

Ngoài ra kiểm tra viết lại URL của bạn. Nó có thể ném 404 nếu tìm thấy thứ gì đó "kỳ lạ".

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ể RENAME tệp phông chữ để nó kết thúc bằng svg (nhưng vẫn giữ định dạng). Hoạt động tốt với tôi trong Chrome và Firefox.

Nếu vẫn không hoạt động sau khi thêm các 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 trong trang web hay không và đảm bảo chọn "Nhận dạng nhóm ứng dụng" theo ảnh chụp màn hình đã cho.

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

Đã giải quyết nó:

Tôi đã phải sử dụng phương pháp Mo'BONSproofer