Warum funktioniert mein @font-face nicht in Firefox, aber in Chrome und IE?

Warum CSS @font-face in Chrome und IE, aber nicht in Firefox funktioniert

Mit der CSS-@font-face-Regel können Sie benutzerdefinierte Schriftarten zu Ihrer Website hinzufügen. In diesem Fall funktionierte die Regel jedoch einwandfrei in Chrome und Internet Explorer, jedoch nicht in Firefox.

Problem mit dem lokalen Dateisystem

Firefox erzwingt einen strikten „Datei-URI-Ursprung“ (Datei:/ //)-Richtlinie standardmäßig. Wenn Sie Ihre Website lokal mit dem Protokoll „file:///“ ausführen, erlaubt Firefox keinen domänenübergreifenden Zugriff auf Schriftarten.

Um dieses Problem zu beheben, laden Sie Ihre Website mit dem Protokoll „http://“ oder deaktivieren Sie es Folgende Firefox-Einstellung:

security.fileuri.strict_origin_policy

Problem mit domänenübergreifenden veröffentlichten Websites

Wenn dieses Problem danach auftritt Beim Bereitstellen Ihrer Website ist es möglich, dass Ihr Browser die relativen Schriftartpfade als domänenübergreifende Anforderungen interpretiert. Um dies zu verhindern, fügen Sie den folgenden Header zu Ihrer .htaccess-Datei hinzu:

<FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"
    </IfModule>
</FilesMatch>

Dadurch wird der Server angewiesen, bei jeder Schriftartdateianforderung einen zusätzlichen Header zu senden, der den Zugriff von jeder Domäne aus ermöglicht.

Andere mögliche Lösungen

Wenn das Problem durch die oben genannten Schritte nicht behoben wird, erwägen Sie die Verwendung der Base64-Kodierung für Ihre Schriftart. Dies ist zwar nicht die ideale Lösung, kann aber als letzter Ausweg funktionieren.

Das obige ist der detaillierte Inhalt vonWarum funktioniert mein @font-face nicht in Firefox, aber in Chrome und IE?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!