Glyphicons-buçukluklar-düzenli.woff2 ile ilgili hata nasıl kaldırılır

ASP.NET MVC4 Bootstrap 3 uygulaması, Web IDE için Microsoft Visual Studio Express 2013'ten çalışıyor.

Chrome konsolu her zaman hata gösteriyor

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

Bu dosya, Çözüm Gezgini'ndeki yazı tipi dizininde bulunur. Derleme işlemi "İçerik" olarak ayarlanmış ve Çıktıya Kopyala dizini "Diğer yazı tipi dosyalarındaki gibi kopyalamayın". NuGet kullanılarak çözüme Bootstrap 3 eklenir. Bu hatanın oluşmaması için bu nasıl düzeltilir? Uygulama, Glyphicon ve FontAwesome simgelerini düzgün bir şekilde gösterir. Bu hata her zaman uygulama başlangıcında ortaya çıkar.

Bu sorun, IIS'nin woffve woff2dosya mime türlerini bilmemesi nedeniyle oluşur .

1.Çözüm:

Bu satırları web.config projenize ekleyin:

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

2.Çözüm:

IIS proje sayfasında:

Adım 1: Projenizin IIS ana sayfasına gidin ve MIME Typesdüğmeye çift ​​tıklayın :

Adım 2: Menüden Addbutonuna tıklayın Actions:

Adım 3: Ekranın ortasında bir pencere belirir ve bu pencerede çözüm 1'den iki satırı eklemeniz gerekir:

Benim durumumda, eksik dosyayı doğrudan buradan indirdim: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Yalnızca html'ye erişiminiz varsa bunu html'nize ekleyin:

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

Benim için sorun iki yönlüydü: Birincisi, uğraştığım IIS sürümü .woff2MIME türü hakkında bir şey bilmiyordu , sadece hakkında .woff. IIS Yöneticisi'ni web uygulaması düzeyinde değil sunucu düzeyinde kullanarak bunu düzelttim, böylece ayar her yeni uygulama dağıtımında geçersiz kılınmayacaktı. (IIS Yöneticisi altında, MIME türlerine gittim ve eksikleri ekledim .woff2, ardından güncelledim .woff.)

İkincisi ve daha da önemlisi, bootstrap.cssbazı diğer dosyalarla birlikte "~/bundles/css/site". Bu arada yazı tipi dosyalarım içerideydi "~/fonts". yanlış yola çevrilen bootstrap.cssglifikon yazı tiplerini arar ."../fonts""~/bundles/fonts"

Başka bir deyişle, paket yolum bir dizin çok derindi. Olarak yeniden adlandırdım "~/bundles/siteCss"ve projemde bulduğum tüm referansları güncelledim. Şimdi bootstrap "~/fonts"işe yarayan glifikon dosyalarını aradı. Sorun çözüldü.

Yukarıda ikinci sorun sabit önce hiçbiri ait glyphiconfont dosyaları yükleme idi. Belirti, glyphiconprojedeki tüm glif örneklerinin boş bir kutu göstermesiydi. Ancak bu belirti, geliştirici makinemde değil, yalnızca web uygulamasının dağıtılan sürümlerinde ortaya çıktı. Hala neden böyle olduğundan emin değilim.

Yukarıdaki tüm önerileri denedim, ancak asıl sorunum uygulamamın / font klasörünü ve içeriğini (.woff vb.) App / fonts içinde aramasıydı, ancak / fonts klasörüm / app ile aynı seviyedeydi. / Fontları / app altına taşıdım ve şimdi iyi çalışıyor. Umarım bu, yanıt için internette dolaşan başka birine yardımcı olur.

Bu sorun , IIS'nin woff2 dosya mime türlerinin gerçek konumunu bulmaması nedeniyle oluşur. Font-face URL'sini doğru bir şekilde ayarlayın, ayrıca font- family'i aşağıda gösterildiği gibi CSS dosyanızda glificon-buçukluklar olarak normal tutun.

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