Warum funktioniert mein @font-face nicht in Firefox?

CSS @font-face funktioniert in Firefox nicht: Beheben von domänenübergreifenden und lokalen Hosting-Problemen

Firefox weist Besonderheiten bei der Darstellung definierter benutzerdefinierter Schriftarten auf Verwenden der @font-face-Regel, insbesondere wenn sich die HTML- und CSS-Dateien lokal oder auf anderen Servern befinden Domänen.

Lokales Hosting (file:///)

Firefox erzwingt eine strenge Ursprungsrichtlinie für den lokalen Dateizugriff (file:///). Um dieses Problem zu beheben:

• Navigieren Sie zu „about:config“ in der Adressleiste von Firefox.
• Filtern Sie nach „fileuri“ und schalten Sie „security.fileuri.strict_origin_policy“ auf „false“ um.

Dadurch kann Firefox unabhängig vom Dokumentpfad auf lokale Schriftartressourcen zugreifen Ebenen.

Veröffentlichte Website

Wenn das Problem auf einer veröffentlichten Website weiterhin besteht, ist es eine Überlegung wert:

• Hinzufügen einer Zugriffskontroll- Allow-Origin-Header für .ttf-, .otf- und .eot-Dateien im .htaccess Datei:

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

• Alternativ kann die Schriftart mit Base64 kodiert werden (jedoch aus ästhetischen Gründen nicht empfohlen).

Zusätzliche Informationen

Eine umfassende Übersicht zu diesem Problem finden Sie im Folgenden Links:

• [CSS Cross-Origin-Schriftarten in Firefox](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [Domänenübergreifende Schriftarten aktivieren in Firefox](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-in-firefox)

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