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

Chrome 및 IE의 호환성에도 불구하고 Firefox에서 CSS @font-face 규칙이 렌더링되지 않음

CSS에 정의된 @font-face 규칙이 작동하지 않는 문제가 발생하는 경우 Firefox에서는 기능적으로 Chrome 및 IE에서는 글꼴 렌더링에 영향을 줄 수 있는 다양한 요소를 고려하는 것이 중요합니다. 탐색할 수 있는 두 가지 잠재적 솔루션은 다음과 같습니다.

로컬 환경(file:///)

Firefox는 기본적으로 로컬 파일(file:///)에 액세스할 때 엄격한 보안 정책을 시행합니다. 동작을 다른 브라우저와 맞추려면 "about:config"에서 다음 기본 설정을 수정하세요.

• security.fileuri.strict_origin_policy

이 값을 false로 설정하세요. Firefox가 다양한 디렉토리 수준에서 로컬 글꼴 리소스를 로드할 수 있도록 합니다.

게시됨 웹사이트

게시된 웹사이트에서 문제가 지속되면 상대 경로를 사용하더라도 글꼴 액세스 문제가 도메인 간 문제와 관련이 있는지 확인하세요. 관련 파일 형식(.ttf, .otf, .eot)에 대해 .htaccess 파일에 다음 헤더를 추가하는 것이 좋습니다.

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

이 수정으로 문제가 해결될 가능성은 낮지만 빠른 문제 해결 단계입니다. 또는 이 시나리오에서 작동할 수 있는 글꼴 서체를 포함하기 위해 base64 인코딩을 사용하는 것이 좋습니다.

자세한 지침은 다음 리소스를 참조하세요. [CSS @font-face: Firefox에서 로드되지 않는 로컬 파일]( https://stackoverflow.com/questions/16392453/css-font-face-local-files-not-loading-in-firefox).

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