Heim >Web-Frontend >CSS-Tutorial >Warum kann ich in Firefox keine @font-face-Schriftarten von einer externen Domäne laden?
@font-face Absolute URL von einer externen Domain: Fehlerbehebung bei Problemen in Firefox
Einbindung externer Schriftarten in Ihre Website mithilfe von @font-face Die Regel ist für die Sicherstellung einer einheitlichen Typografie und Markenbildung unerlässlich. Wenn Sie Ihre Schriftarten jedoch auf einer externen Domäne hosten und versuchen, sie in Firefox zu laden, kann es zu dem frustrierenden Problem kommen, dass Schriftarten nicht richtig dargestellt werden.
Dieses Problem ergibt sich aus der Tatsache, dass Firefox eine Same-Origin-Richtlinie erzwingt auf @font-face-Anfragen. Beim Versuch, Schriftarten aus einer anderen Domäne zu laden, löst der Browser einen Fehler aus, es sei denn, die Schriftartdateien sind mit Zugriffskontrollheadern versehen.
Beheben des Problems in Apache
An Um dieses Problem zu beheben und das Laden ursprungsübergreifender Schriftarten in Firefox zu ermöglichen, müssen Sie Ihren Webserver so konfigurieren, dass er die entsprechenden Header sendet. Fügen Sie für Apache-Server den folgenden Code zu Ihrer .htaccess-Datei hinzu und starten Sie den Server neu:
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>
Diese Konfiguration fügt den erforderlichen Access-Control-Allow-Origin-Header mit dem Wert „*“ hinzu und ermöglicht dies Firefox lädt die Schriftarten von der angegebenen externen Domäne.
Mit diesen Headern kann Firefox nun auf die Schriftarten zugreifen und diese wie vorgesehen wiedergeben, wodurch ein nahtloses und konsistentes typografisches Erlebnis auf Ihren Webseiten gewährleistet wird.
Das obige ist der detaillierte Inhalt vonWarum kann ich in Firefox keine @font-face-Schriftarten von einer externen Domäne laden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!