Jak usunąć błąd dotyczący nie znaleziono glyphicons-halflings-regular.woff2

Aplikacja ASP.NET MVC4 Bootstrap 3 działa z Microsoft Visual Studio Express 2013 dla Web IDE.

Konsola Chrome pokazuje zawsze błąd

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

Ten plik istnieje w katalogu czcionek w Eksploratorze rozwiązań. Akcja kompilacji jest ustawiona na „Treść”, a Kopiuj do katalogu wyjściowego to „Nie kopiuj jak w innych plikach czcionek”. Bootstrap 3 jest dodawany do rozwiązania przy użyciu NuGet. Jak to naprawić, aby ten błąd nie występował? Aplikacja poprawnie wyświetla ikony Glyphicon i FontAwesome. Ten błąd występuje zawsze podczas uruchamiania aplikacji.

Ten problem występuje, ponieważ IIS nie wie woffi woff2plików typy MIME.

Rozwiązanie 1:

Dodaj te linie do swojego projektu web.config:

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

Rozwiązanie 2:

Na stronie projektu IIS:

Krok 1: Przejdź do strony głównej swojego projektu IIS i kliknij dwukrotnie MIME Typesprzycisk:

Krok 2: Kliknij Addprzycisk z Actionsmenu:

Krok 3: Na środku ekranu pojawia się okno, w którym należy dodać dwie linie z rozwiązania 1:

W moim przypadku właśnie pobrałem brakujący plik bezpośrednio stąd: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Dodaj ten do swojego HTML, jeśli masz dostęp tylko do HTML:

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

Dla mnie problem był dwojaki: po pierwsze, wersja IIS, z którą miałem do czynienia, nie wiedziała o .woff2typie MIME, tylko o .woff. Naprawiłem to za pomocą Menedżera IIS na poziomie serwera, a nie na poziomie aplikacji internetowej, więc ustawienie nie było zastępowane przy każdym nowym wdrożeniu aplikacji. (W Menedżerze IIS przeszedłem do typów MIME i dodałem brakujące .woff2, a następnie zaktualizowałem .woff).

Po drugie, i co ważniejsze, pakowałem bootstrap.cssrazem z kilkoma innymi plikami jako pliki "~/bundles/css/site". Tymczasem moje pliki czcionek były w formacie "~/fonts". bootstrap.cssszuka czcionek glificowych w programie "../fonts", co oznacza "~/bundles/fonts"- zła ścieżka.

Innymi słowy, moja ścieżka do pakietu była o jeden katalog za głęboka. Zmieniłem jego nazwę na "~/bundles/siteCss"i zaktualizowałem wszystkie odniesienia do niego, które znalazłem w moim projekcie. Teraz bootstrap sprawdził "~/fonts"pliki glifów, które zadziałały. Problem rozwiązany.

Zanim rozwiązałem drugi problem powyżej, żaden z glyphiconplików czcionek się nie ładował. Objawem było to, że wszystkie przypadkiglyphicon glifów w projekcie pokazywały tylko puste pudełko. Jednak ten symptom wystąpił tylko we wdrożonych wersjach aplikacji internetowej, a nie na moim komputerze deweloperskim. Nadal nie jestem pewien, dlaczego tak się stało.

Wypróbowałem wszystkie powyższe sugestie, ale moim rzeczywistym problemem było to, że moja aplikacja szukała folderu / font i jego zawartości (.woff itp.) W app / fonts, ale mój folder / fonts był na tym samym poziomie co / app. Przeniosłem / fonts pod / app i teraz działa dobrze. Mam nadzieję, że pomoże to komuś innemu wędrować po sieci w poszukiwaniu odpowiedzi.

Ten problem występuje, ponieważ usługi IIS nie znajdują rzeczywistej lokalizacji typów MIME pliku woff2. Ustaw prawidłowo adres URL czcionki-twarzy, zachowaj również rodzinę czcionek jako glificons-halfling-regular w pliku CSS, jak pokazano poniżej.

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