Warum wird mir in Chrome „Ressource als Schriftart interpretiert, aber mit MIME-Typ application/octet-stream übertragen' angezeigt, wenn ich @font-face verwende?

Falscher MIME-Typ für @font-face in Chrome

Beim Versuch, eine benutzerdefinierte Schriftart mithilfe der @font-face-Deklaration in Chrome zu implementieren , können Entwickler auf die Fehlermeldung „Ressource als Schriftart interpretiert, aber mit MIME-Typ application/octet-stream übertragen“ stoßen. Dieses Problem ist auf eine Diskrepanz zwischen dem MIME-Typ der Schriftartdatei und dem in der Deklaration angegebenen erwarteten Typ zurückzuführen.

Um diese Diskrepanz zu beheben, kann eine umfassende @font-face-Deklaration verwendet werden, die unterschiedliche Browseranforderungen berücksichtigt . Die folgende browserübergreifende Deklaration stellt die Kompatibilität mit Chrome und Firefox sicher:

<code class="css">@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}</code>

Die .eot-Datei ist für Internet Explorer bestimmt, während andere Browser entweder .woff- oder .ttf-Formate verwenden. Um diese verschiedenen Formate aus Ihrer Quellschriftart zu generieren, sollten Sie den Font-Face-Generator von Font Squirrel nutzen.

Zusätzlich sollte eine .htaccess-Datei konfiguriert werden, um die relevanten MIME-Typen für die Schriftartdateien anzugeben:

<code class="htaccess">AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff</code>

Indem Sie diese Empfehlungen befolgen, können Sie sicherstellen, dass Ihre benutzerdefinierte Schriftart in verschiedenen Browsern, einschließlich Chrome, ordnungsgemäß angezeigt wird.

Das obige ist der detaillierte Inhalt vonWarum wird mir in Chrome „Ressource als Schriftart interpretiert, aber mit MIME-Typ application/octet-stream übertragen' angezeigt, wenn ich @font-face verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!