So entfernen Sie Fehler über Glyphicons-Halblinge-Regular.woff2 nicht gefunden

95

Die ASP.NET MVC4 Bootstrap 3-Anwendung wird unter Microsoft Visual Studio Express 2013 für Web IDE ausgeführt.

Chrome-Konsole zeigt immer Fehler

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

Diese Datei befindet sich im Schriftartenverzeichnis im Projektmappen-Explorer. Die Erstellungsaktion ist auf "Inhalt" und das Verzeichnis "In Ausgabe kopieren" auf "Nicht wie in anderen Schriftdateien kopieren" eingestellt. Bootstrap 3 wird der Lösung mit NuGet hinzugefügt. Wie kann ich das beheben, damit dieser Fehler nicht auftritt? Die Anwendung zeigt die Glyphicon- und FontAwesome-Symbole korrekt an. Dieser Fehler tritt immer beim Start der Anwendung auf.

Andrus
quelle

Antworten:

238

Dieses Problem tritt auf, weil IIS die MIME-Typen nicht kennt woffund nicht woff2.

Lösung 1:

Fügen Sie diese Zeilen in Ihr web.config-Projekt ein:

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

Lösung 2:

Auf der IIS-Projektseite:

Schritt 1: Gehen Sie zu Ihrer Projekt-IIS-Homepage und doppelklicken Sie auf die MIME TypesSchaltfläche:

Schritt 1

Schritt 2: Klicken Sie im Menü auf die AddSchaltfläche Actions: Schritt 2

Schritt 3: In der Mitte des Bildschirms erscheint ein Fenster und in diesem Fenster müssen Sie die beiden Zeilen aus Lösung 1 hinzufügen: Schritt 3

TotPeRo
quelle
Das hat es für mich gelöst, aber warum? Ich würde mich über eine Erklärung freuen, warum die Lösung mehr als nur ein sinnloses Kopieren / Einfügen des bereitgestellten Codes funktioniert.
Bpainter
3
@Bpainter Die erste Zeile in dieser Antwort sagt Ihnen warum. Die MIME-Typen sind keinem Typ zugeordnet, sodass sie vom Browser nicht geladen werden können. Warum lädt ein Browser keine nicht zugeordnete MIME-Datei? Ich denke, das ist eine separate Frage, auf die ich keine Antwort weiß.
Camille Sévigny
4
@ CamilleSévigny Ich glaube, die Antwort auf Ihre Frage lautet, dass IIS nur gültige Dateitypen zur Verfügung stellt. Da es die Erweiterungen .woff und .woff2 nicht erkennt, antwortet es auf Anfragen nach diesen Dateien mit 404 - nicht gefunden.
Grungondola
@ CamilleSévigny Danke, als ich diesen Kommentar machte, war die erste Zeile nicht da. Es wurde nachträglich bearbeitet. Ohne Ihren Kommentar hätte ich ihn allerdings nie gesehen.
Bpainter
In meinem Fall war das Problem die CssRewriteUrlTransform , die ich im Bundle von Bootstrap und Font-Awesome verwendet habe. Wenn Sie die normale Ordnerstruktur beibehalten, müssen Sie diese Option nicht verwenden.
g_brahimaj
47

In meinem Fall habe ich die fehlende Datei direkt von hier heruntergeladen: https://gitlab.com/mailman/mailman-website/raw/a97d6b4c5b29594004e3855f1ab1222449d0c211/content/fonts/glyphicons-halflings-regular.woff2

Reza Mamun
quelle
7
löste es für mich. Vielen Dank. Ich habe die Dateien heruntergeladen und den Schriftartenordner in meinem Projektverzeichnis gespeichert. CSS-Dateien im Ordner "css", Schriftarten im Ordner "fonts"
CyprUS
1
Manchmal sind Lösungen ziemlich einfach, und wir wissen nichts :) Danke für die Lösung, ich habe dies in meinem fontsOrdner in meiner MVC5-App verpasst
Irf
6

Fügen Sie dieses zu Ihrem HTML hinzu, wenn Sie nur Zugriff auf das HTML haben:

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
FMF
quelle
Danke, diese Lösung hat bei mir funktioniert. Das Hinzufügen des <staticContent> -Tags in der web.config wie folgt - stackoverflow.com/questions/46508793/… - hat bei mir jedoch nicht funktioniert.
BUDDHIKA
5

Für mich gab es zwei Probleme: Erstens wusste die Version von IIS, mit der ich mich befasste, nichts über den .woff2MIME-Typ, sondern nur über .woff. Ich habe das Problem mit IIS Manager auf Serverebene und nicht auf Webanwendungsebene behoben, damit die Einstellung nicht bei jeder neuen App-Bereitstellung überschrieben wird. (Unter IIS Manager bin ich zu MIME-Typen gegangen und habe die fehlenden hinzugefügt .woff2und dann aktualisiert .woff.)

Zweitens, und was noch wichtiger ist, habe ich bootstrap.csszusammen mit einigen anderen Dateien als gebündelt "~/bundles/css/site". In der Zwischenzeit befanden sich meine Schriftdateien in "~/fonts". bootstrap.csssucht nach den Glyphicon-Schriftarten in "../fonts", die in einen "~/bundles/fonts"falschen Pfad übersetzt wurden.

Mit anderen Worten, mein Bundle-Pfad war ein Verzeichnis zu tief. Ich habe es in umbenannt "~/bundles/siteCss"und alle Verweise darauf aktualisiert, die ich in meinem Projekt gefunden habe. Jetzt suchte Bootstrap nach "~/fonts"den Glyphicon-Dateien, die funktionierten. Problem gelöst.

Bevor ich das zweite Problem oben behoben habe, wurde keine der glyphiconSchriftdateien geladen. Das Symptom war, dass alle Instanzen von glyphiconGlyphen im Projekt nur eine leere Box zeigten. Dieses Symptom trat jedoch nur in den bereitgestellten Versionen der Webanwendung auf, nicht auf meinem Entwicklungscomputer. Ich bin mir immer noch nicht sicher, warum das so war.

Stephen G Tuggy
quelle
3

Ich habe alle oben genannten Vorschläge ausprobiert, aber mein eigentliches Problem war, dass meine Anwendung in app / fonts nach dem Ordner / font und seinem Inhalt (.woff usw.) suchte, aber mein Ordner / fonts befand sich auf derselben Ebene wie / app. Ich habe / fonts unter / app verschoben und es funktioniert jetzt einwandfrei. Ich hoffe, dies hilft jemand anderem, im Internet nach einer Antwort zu suchen.

Cirl
quelle
1

Dieses Problem tritt auf, weil IIS den tatsächlichen Speicherort der Mimetypen der woff2-Datei nicht findet . Stellen Sie die URL der Schriftart richtig ein und behalten Sie die Schriftfamilie als Glyphicons-Halbling-Regular in Ihrer CSS-Datei bei, wie unten gezeigt.

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