Cách xóa lỗi không tìm thấy glyphicons-halflings-regular.woff2

Ứng dụng ASP.NET MVC4 Bootstrap 3 đang chạy từ Microsoft Visual Studio Express 2013 cho Web IDE.

Bảng điều khiển Chrome luôn hiển thị lỗi

http://localhost:52216/admin/fonts/glyphicons-halflings-regular.woff2
Failed to load resource: the server responded with a status of 404 (Not Found)

Tệp này tồn tại trong thư mục phông chữ trong Trình khám phá Giải pháp. Hành động xây dựng được đặt thành "Nội dung" và Thư mục Sao chép vào Đầu ra là "Không sao chép như trong các tệp phông chữ khác". Bootstrap 3 được thêm vào giải pháp sử dụng NuGet. Cách khắc phục để lỗi này không xảy ra? Ứng dụng hiển thị đúng các biểu tượng Glyphicon và FontAwesome. Lỗi này luôn xảy ra khi khởi động ứng dụng.

Sự cố này xảy ra vì IIS không biết về woffvà woff2các loại mime tệp.

Giải pháp 1:

Thêm những dòng này vào dự án web.config của bạn:

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

Giải pháp 2:

Trên trang dự án IIS:

Bước 1: Vào trang chủ IIS dự án của bạn và nhấp đúp vào MIME Typesnút:

Bước 2: Nhấp vào Addnút từ Actionsmenu:

Bước 3: Ở giữa màn hình xuất hiện một cửa sổ và trong cửa sổ này bạn cần thêm hai dòng từ giải pháp 1:

Trong trường hợp của tôi, tôi vừa tải xuống tệp bị thiếu trực tiếp từ đây: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Thêm cái này vào html của bạn nếu bạn chỉ có quyền truy cập vào html:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

Đối với tôi, vấn đề gấp đôi: Thứ nhất, phiên bản IIS mà tôi đang xử lý không biết về .woff2kiểu MIME, chỉ biết về .woff. Tôi đã khắc phục điều đó bằng cách sử dụng Trình quản lý IIS ở cấp máy chủ, không phải ở cấp ứng dụng web, vì vậy cài đặt sẽ không bị ghi đè với mỗi lần triển khai ứng dụng mới. (Trong Trình quản lý IIS, tôi đã đi tới loại MIME và thêm phần còn thiếu .woff2, sau đó cập nhật .woff.)

Thứ hai, và quan trọng hơn, tôi đã đóng gói bootstrap.csscùng với một số tệp khác như "~/bundles/css/site". Trong khi đó, các tệp phông chữ của tôi đã ở trong "~/fonts". bootstrap.csstìm kiếm các phông chữ glyphicon "../fonts"được dịch sang "~/bundles/fonts"- sai đường dẫn.

Nói cách khác, đường dẫn gói của tôi là một thư mục quá sâu. Tôi đã đổi tên nó thành "~/bundles/siteCss"và cập nhật tất cả các tham chiếu đến nó mà tôi tìm thấy trong dự án của mình. Bây giờ bootstrap đã tìm "~/fonts"kiếm các tệp glyphicon, đã hoạt động. Vấn đề đã được giải quyết.

Trước khi tôi cố định vấn đề thứ hai ở trên, không ai trong số các glyphiconfile font đã tải. Dấu hiệu là tất cả các trường hợp glyphiconglyphs trong dự án chỉ hiển thị một hộp trống. Tuy nhiên, hiện tượng này chỉ xảy ra trong các phiên bản đã triển khai của ứng dụng web, không phải trên máy nhà phát triển của tôi. Tôi vẫn không chắc tại sao lại như vậy.

Tôi đã thử tất cả các đề xuất ở trên, nhưng vấn đề thực sự của tôi là ứng dụng của tôi đang tìm kiếm thư mục / font và nội dung của nó (.woff, v.v.) trong ứng dụng / phông chữ, nhưng thư mục / phông chữ của tôi ở cùng cấp với / ứng dụng. Tôi đã di chuyển / phông chữ trong / ứng dụng và hiện nó hoạt động tốt. Tôi hy vọng điều này sẽ giúp ai đó chuyển vùng web tìm được câu trả lời.

Sự cố này xảy ra do IIS không tìm thấy vị trí thực của các loại mime tệp woff2. Đặt URL của font-face đúng cách, cũng giữ font-family dưới dạng glyphicons-halflings-thông thường trong tệp CSS của bạn như được hiển thị bên dưới.

@font-face {
font-family: 'glyphicons-halflings-regular'; 
src: url('../../../fonts/glyphicons-halflings-regular.woff2') format('woff2');}