Warum werden meine Schriftarten in Firefox nicht geladen, wenn ich @font-face mit absoluten URLs von einer externen Domain verwende?

Grundlegendes zu den domänenübergreifenden @font-face-Einschränkungen in Firefox

Frage: Warum werden meine Schriftarten in Firefox nicht geladen, wenn ich @font-face verwende? Gesicht mit absoluten URLs von einer externen Domain?

Problembeschreibung:

Das bereitgestellte Code-Snippet verwendet @font-face, um benutzerdefinierte Schriftarten zu definieren, die auf „fwy.pagodabox“ gehostet werden. com“ zur Verwendung in einem Shopify-Shop. In Firefox 13.0.1 werden diese Schriftarten jedoch nicht geladen, was zu der Frage führt, ob dies ein Problem mit der Firefox-Funktionalität oder der im CSS verwendeten Syntax ist.

Antwort:

Firefox schränkt das Laden von Schriftarten aus externen Domänen über @font-face ein, es sei denn, es sind spezielle Zugriffskontrollheader vorhanden. Beim Hosten von Schriftarten in einer anderen Domäne ist es wichtig, den Server so zu konfigurieren, dass er den Access-Control-Allow-Origin-Header mit dem Wert * (Platzhalter) oder die spezifische Domäne enthält, von der die Schriftarten angefordert werden. Dadurch kann der Browser über Domänengrenzen hinweg auf die Schriftarten zugreifen.

Für Apache-Server können die folgenden Anweisungen zur .htaccess-Datei hinzugefügt werden, um das domänenübergreifende Laden von Schriftarten zu ermöglichen:

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

Durch die Implementierung dieser Zugriffskontrollheader kann der Shopify-Shop auf die auf dem Pagodabox-Server gehosteten Schriftarten zugreifen und die Schriftarten werden korrekt in Firefox geladen.

Das obige ist der detaillierte Inhalt vonWarum werden meine Schriftarten in Firefox nicht geladen, wenn ich @font-face mit absoluten URLs von einer externen Domain verwende?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!