Warum funktioniert mein CSS @font-face in Firefox nicht?

CSS @font-face wird in Firefox nicht gerendert

Obwohl die CSS-@font-face-Regel in Google Chrome und Internet Explorer korrekt funktioniert funktioniert nicht in Firefox. Obwohl der @font-face-Code gültig zu sein scheint, scheint das Problem spezifisch für Firefox zu sein. Um diese Diskrepanz zu beheben, müssen Sie die Konfiguration und Einstellungen in Firefox verstehen.

Lokale Datei-URI-Richtlinie

Firefox verwendet eine strenge Richtlinie bezüglich der Datei-URI-Ursprünge (file:///) , was das Laden lokaler Ressourcen behindern kann. Um dieses Problem zu beheben, navigieren Sie in der Firefox-Adressleiste zu „about:config“, filtern Sie nach „fileuri“ und schalten Sie die Einstellung „security.fileuri.strict_origin_policy“ auf „false“ um. Dadurch kann sich Firefox beim Umgang mit lokalen Schriftartressourcen ähnlich wie andere Browser verhalten.

Domänenübergreifende Probleme

Wenn die Website veröffentlicht wird und das Problem weiterhin besteht, kann dies der Fall sein Es ist notwendig, ein potenzielles domänenübergreifendes Problem zu berücksichtigen. Obwohl im Code relative Pfade angegeben sind, wird das Hinzufügen eines zusätzlichen Headers in der .htaccess-Datei empfohlen:

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

Dieser Header sollte mögliche domänenübergreifende Einschränkungen verhindern. Darüber hinaus ist es möglich, die Base64-Kodierung für die Schriftart zu verwenden, wodurch das Problem ebenfalls behoben werden kann.

Weitere Informationen und eine umfassende Übersicht finden Sie in der in der Antwort bereitgestellten Ressource.

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