@font-face를 사용할 때 Chrome에서 \'리소스가 글꼴로 해석되었지만 MIME 유형 애플리케이션/옥텟 스트림\'으로 전송되는 이유는 무엇입니까?

Chrome에서 @font-face에 대한 잘못된 MIME 유형

Chrome에서 @font-face 선언을 사용하여 맞춤 글꼴을 구현하려고 할 때 , 개발자는 "리소스가 글꼴로 해석되었지만 MIME 유형 애플리케이션/옥텟 스트림으로 전송되었습니다."라는 오류 메시지를 접할 수 있습니다. 이 문제는 글꼴 파일의 MIME 유형과 선언에 지정된 예상 유형 간의 불일치로 인해 발생합니다.

이 불일치를 해결하려면 다양한 브라우저 요구 사항을 충족하는 포괄적인 @font-face 선언을 사용할 수 있습니다. . 다음 브라우저 간 선언은 Chrome 및 Firefox 모두와의 호환성을 보장합니다.

<code class="css">@font-face {
  font-family: 'Font Name';
  src: url('FontName.eot');
  src: local('☺'),
         url('FontName.woff') format('woff'), url('FontName.ttf') format('truetype');
}</code>

.eot 파일은 Internet Explorer용으로 지정되는 반면, 다른 브라우저는 .woff 또는 .ttf 형식을 사용합니다. 소스 글꼴에서 이러한 다양한 형식을 생성하려면 Font Squirrel의 글꼴 생성기를 활용하는 것이 좋습니다.

또한 .htaccess 파일은 글꼴 파일에 대한 관련 MIME 유형을 지정하도록 구성되어야 합니다.

<code class="htaccess">AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff</code>

이러한 권장 사항을 따르면 Chrome을 포함한 다양한 브라우저에서 맞춤 글꼴이 올바르게 표시되도록 할 수 있습니다.

위 내용은 @font-face를 사용할 때 Chrome에서 \'리소스가 글꼴로 해석되었지만 MIME 유형 애플리케이션/옥텟 스트림\'으로 전송되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!