@font-face 및 올바른 MIME 유형을 사용하여 브라우저 간 호환성을 달성하는 방법은 무엇입니까?

올바른 MIME 유형으로 브라우저 @font-face 교차

@font-face 규칙을 사용하여 글꼴을 삽입하는 경우 올바른 MIME 지정 유형은 브라우저 전체에서 적절한 렌더링을 위해 중요합니다. 이 경우 Chrome은 잘못된 MIME 유형으로 인해 오류를 표시합니다.

이 문제를 해결하려면 브라우저 간 호환 가능한 @font-face 선언을 살펴보겠습니다.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
         url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

• IE의 경우 .eot: IE에는 .eot 파일 형식이 필요합니다.
• 다른 브라우저의 경우 .woff 또는 .ttf: 기타 브라우저는 .woff 또는 .ttf를 지원합니다.

소스 글꼴에서 이러한 글꼴 형식을 생성하려면 Font Squirrel의 글꼴 생성기를 사용하세요.

또한 글꼴 형식에 대한 MIME 유형을 지정하려면 .htaccess 파일이 필요합니다.

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType application/x-font-woff .woff

이러한 변경 사항을 구현하면 @font-face 규칙이 Firefox와 Chrome 모두에 글꼴을 올바르게 삽입하여 브라우저 전체에서 일관된 렌더링을 보장합니다.

위 내용은 @font-face 및 올바른 MIME 유형을 사용하여 브라우저 간 호환성을 달성하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!