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

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.

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 2: Klicken Sie im Menü auf die AddSchaltfläche Actions:

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:

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

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

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.

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.

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');}