Heim > Web-Frontend > CSS-Tutorial > Warum zeigt meine @font-face-Deklaration in Chrome einen falschen MIME-Typ an?

Warum zeigt meine @font-face-Deklaration in Chrome einen falschen MIME-Typ an?

Susan Sarandon
Freigeben: 2024-10-25 22:28:02
Original
860 Leute haben es durchsucht

Why does my @font-face declaration display an incorrect MIME type in Chrome?

'font-face'-Deklaration zeigt falschen MIME-Typ in Chrome an

Bei Verwendung der folgenden @font-face-Deklaration:

<code class="css">@font-face {
    font-family: SolaimanLipi;
    src: url("font/SolaimanLipi_20-04-07.ttf");
}</code>
Nach dem Login kopieren

it Funktioniert einwandfrei in Firefox, schlägt jedoch in Chrome fehl. Bei der Prüfung des Elements wird die folgende Meldung angezeigt:

Resource interpreted as font but transferred with MIME type application/octet-stream.
Nach dem Login kopieren

Um dieses Problem der browserübergreifenden Kompatibilität zu beheben, sollten Sie die von Paul Irish vorgeschlagene vielseitige @font-face-Deklaration in Betracht ziehen:

<code class="css">@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}</code>
Nach dem Login kopieren

Diese Erklärung richtet sich an verschiedene Browser, indem sie Folgendes anbietet:

  • .eot für Internet Explorer
  • .woff oder .ttf für andere Browser

Um diese Schriftart zu generieren Um Schriftarten aus der Originalquelle zu verwenden, verwenden Sie den Schriftartengenerator von Font Squirrel.

Fügen Sie außerdem eine .htaccess-Datei hinzu, um die Schriftarten zu definieren:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWarum zeigt meine @font-face-Deklaration in Chrome einen falschen MIME-Typ an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage