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

CSS @font-face가 Firefox에서 렌더링되지 않음

Google Chrome 및 Internet Explorer에서 올바르게 작동함에도 불구하고 CSS @font-face 규칙 Firefox에서는 작동하지 않습니다. @font-face 코드는 유효한 것으로 보이지만 문제는 Firefox에만 국한된 것 같습니다. 이러한 불일치 문제를 해결하려면 Firefox 내의 구성 및 설정을 이해해야 합니다.

로컬 파일 URI 정책

Firefox는 파일 URI 원본(file:///)과 관련하여 엄격한 정책을 사용합니다. 이는 로컬 리소스의 로드를 방해할 수 있습니다. 이 문제를 해결하려면 Firefox 주소 표시줄에서 "about:config"로 이동하고 "fileuri"로 필터링한 다음 "security.fileuri.strict_origin_policy" 기본 설정을 false로 전환하세요. 이를 통해 Firefox는 로컬 글꼴 리소스를 처리할 때 다른 브라우저와 유사하게 작동할 수 있습니다.

도메인 간 문제

사이트가 게시되고 문제가 지속되는 경우 잠재적인 도메인 간 문제를 고려하는 데 필요합니다. 코드에 상대 경로가 지정되어 있더라도 .htaccess 파일에 추가 헤더를 추가하는 것이 좋습니다.

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

이 헤더는 잠재적인 교차 도메인 제한을 방지해야 합니다. 또한 글꼴 서체에 base64 인코딩을 사용하면 문제가 해결될 수도 있습니다.

자세한 내용과 포괄적인 개요는 답변에 제공된 리소스를 참조하세요.

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