외부 도메인의 절대 URL과 함께 @font-face를 사용할 때 내 글꼴이 Firefox에서 로드되지 않는 이유는 무엇입니까?

Firefox의 도메인 간 @font-face 제한 이해

질문: @font-를 사용할 때 내 글꼴이 Firefox에서 로드되지 않는 이유는 무엇입니까? 외부 도메인의 절대 URL이 있습니까?

문제 설명:

제공된 코드 조각은 @font-face를 활용하여 "fwy.pagodabox. com"을 Shopify 스토어에서 사용할 수 있습니다. 그러나 Firefox 13.0.1에서는 이러한 글꼴이 로드되지 않아 이것이 Firefox 기능의 문제인지 CSS에 사용된 구문의 문제인지 의문이 듭니다.

답변:

Firefox는 특정 액세스 제어 헤더가 없으면 @font-face를 통해 외부 도메인에서 글꼴을 로드하는 것을 제한합니다. 다른 도메인에서 글꼴을 호스팅하는 경우 *(와일드카드) 값이 있는 Access-Control-Allow-Origin 헤더 또는 글꼴이 요청되는 특정 도메인을 포함하도록 서버를 구성하는 것이 중요합니다. 이를 통해 브라우저는 도메인 경계를 넘어 글꼴에 액세스할 수 있습니다.

Apache 서버의 경우 .htaccess 파일에 다음 지시문을 추가하여 도메인 간 글꼴 로딩을 활성화할 수 있습니다.

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>

이러한 액세스 제어 헤더를 구현하면 pagodabox 서버에 호스팅된 글꼴을 Shopify 스토어에서 액세스할 수 있으며 해당 글꼴은 Firefox에서 올바르게 로드됩니다.

위 내용은 외부 도메인의 절대 URL과 함께 @font-face를 사용할 때 내 글꼴이 Firefox에서 로드되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!