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

Firefox에서 CSS @font-face가 작동하지 않음: 도메인 간 및 로컬 호스팅 문제 해결

Firefox는 정의된 사용자 정의 글꼴을 렌더링할 때 특이한 점을 나타냅니다. @font-face 규칙 사용(특히 HTML 및 CSS 파일이 로컬 또는 다른 위치에 있는 경우) domains.

로컬 호스팅(file:///)

Firefox는 로컬 파일 액세스(file:///)에 대해 엄격한 원본 정책을 시행합니다. 이 문제를 해결하려면:

• Firefox 주소 표시줄에서 about:config로 이동하세요.
• "fileuri"로 필터링하고 "security.fileuri.strict_origin_policy"를 false로 전환하세요.

이렇게 하면 Firefox가 문서 경로에 관계없이 로컬 글꼴 리소스에 액세스할 수 있습니다.

게시된 사이트

게시된 웹사이트에서 문제가 지속되면 다음을 고려해 볼 가치가 있습니다.

• 액세스 제어 추가- .htaccess의 .ttf, .otf 및 .eot 파일에 대한 Allow-Origin 헤더 파일:

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

• 또는 base64가 글꼴 서체를 인코딩합니다(단, 미적 측면에서는 권장되지 않음).

추가 정보

이 문제에 대한 포괄적인 개요는 다음을 참조하세요. 링크:

• [Firefox의 CSS Cross-Origin 글꼴](https://developer.mozilla.org/en-US/docs/Glossary/Prefetch#Cross-origin_font_loading)
• [교차 도메인 글꼴 활성화 Firefox](https://stackoverflow.com/questions/19223013/enable-cross-domain-fonts-in-firefox)

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