내 @font-face가 Firefox에서는 작동하지 않지만 Chrome 및 IE에서는 작동하는 이유는 무엇입니까?

CSS @font-face가 Chrome 및 IE에서는 작동하지만 Firefox에서는 작동하지 않는 이유

CSS @font-face 규칙을 사용하면 웹사이트에 맞춤 글꼴을 추가할 수 있습니다. 그러나 이 경우 규칙은 Chrome 및 Internet Explorer에서는 완벽하게 작동했지만 Firefox에서는 작동하지 않았습니다.

로컬 파일 시스템 문제

Firefox는 엄격한 "파일 URI 원본"(파일:/ //) 정책이 기본적으로 적용됩니다. file:/// 프로토콜을 사용하여 로컬에서 사이트를 실행하는 경우 Firefox는 도메인 간 글꼴 액세스를 허용하지 않습니다.

이 문제를 해결하려면 http:// 프로토콜을 사용하여 사이트를 로드하거나 비활성화하세요. 다음 Firefox 기본 설정:

security.fileuri.strict_origin_policy

게시된 사이트 교차 도메인 문제

사이트를 배포한 후 이 문제가 발생하면 브라우저가 상대 글꼴 경로를 도메인 간 요청으로 해석할 가능성이 있습니다. 이를 방지하려면 .htaccess 파일에 다음 헤더를 추가하세요.

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

이렇게 하면 서버가 각 글꼴 파일 요청과 함께 추가 헤더를 전송하여 모든 도메인에서의 액세스를 허용하도록 지시합니다.

기타 가능한 해결 방법

위 단계를 수행해도 문제가 해결되지 않으면 글꼴 서체에 base64 인코딩을 사용하는 것이 좋습니다. 이것이 이상적인 솔루션은 아니지만 최후의 수단으로 사용될 수 있습니다.

위 내용은 내 @font-face가 Firefox에서는 작동하지 않지만 Chrome 및 IE에서는 작동하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!