Wie erreicht man browserübergreifende Kompatibilität mit @font-face und korrekten MIME-Typen?

Browserübergreifendes @font-face mit korrekten MIME-Typen

Bei Verwendung der @font-face-Regel zum Einbetten von Schriftarten muss der richtige MIME angegeben werden Der Typ ist entscheidend für die ordnungsgemäße Darstellung in allen Browsern. In diesem Fall zeigt Chrome einen Fehler aufgrund eines falschen MIME-Typs an.

Um dieses Problem zu beheben, untersuchen wir eine browserübergreifend kompatible @font-face-Deklaration:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

• .eot für IE: IE erfordert das .eot-Dateiformat.
• .woff oder .ttf für andere Browser: Andere Browser unterstützen entweder .woff oder .ttf.

Um diese Schriftformate aus der Quellschrift zu generieren, verwenden Sie den Font-Face-Generator von Font Squirrel.

Zusätzlich ist eine .htaccess-Datei erforderlich, um die MIME-Typen für die Schriftformate anzugeben:

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

Durch die Implementierung dieser Änderungen wird die @font-face-Regel Schriftarten sowohl in Firefox als auch in Chrome korrekt einbetten und so eine konsistente Darstellung in allen Browsern gewährleisten.

Das obige ist der detaillierte Inhalt vonWie erreicht man browserübergreifende Kompatibilität mit @font-face und korrekten MIME-Typen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!