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

CSS @font-face-Regel wird in Firefox trotz Kompatibilität in Chrome und IE nicht gerendert

Beim Auftreten des Problems, dass in CSS definierte @font-face-Regeln nicht funktionieren in Firefox, aber in Chrome und IE funktionieren, ist es wichtig, verschiedene Faktoren zu berücksichtigen, die sich auf die Schriftartwiedergabe auswirken können. Hier sind zwei mögliche Lösungen, die es zu erkunden gilt:

Lokale Umgebung (file:///)

Firefox erzwingt standardmäßig eine strenge Sicherheitsrichtlinie beim Zugriff auf lokale Dateien (file:///). Um sein Verhalten an andere Browser anzupassen, ändern Sie die folgende Einstellung in „about:config“:

• security.fileuri.strict_origin_policy

Setzen Sie diesen Wert auf false um Firefox das Laden lokaler Schriftartressourcen über verschiedene Verzeichnisebenen hinweg zu ermöglichen.

Veröffentlicht Website

Wenn das Problem auf einer veröffentlichten Website weiterhin besteht, prüfen Sie, ob das Problem beim Zugriff auf Schriftarten mit domänenübergreifenden Problemen zusammenhängt, auch wenn relative Pfade verwendet werden. Erwägen Sie, den folgenden Header zu Ihrer .htaccess-Datei für relevante Dateitypen (.ttf, .otf, .eot) hinzuzufügen:

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

Obwohl diese Änderung das Problem wahrscheinlich nicht beheben wird, handelt es sich um einen schnellen Schritt zur Fehlerbehebung. Erwägen Sie alternativ die Verwendung der Base64-Codierung zum Einbetten der Schriftart, was in diesem Szenario funktionieren könnte.

Weitere Anleitungen finden Sie in der folgenden Ressource: [CSS @font-face: Lokale Dateien werden in Firefox nicht geladen]( https://stackoverflow.com/questions/16392453/css-font-face-local-files-not-loading-in-firefox).

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