>  기사  >  웹 프론트엔드  >  내 @font-face가 라이브 사이트의 IE9에서 작동하지 않는 이유는 무엇입니까?

내 @font-face가 라이브 사이트의 IE9에서 작동하지 않는 이유는 무엇입니까?

Barbara Streisand
Barbara Streisand원래의
2024-11-01 11:44:02609검색

Why is My @font-face Not Working in IE9 on a Live Site?

IE9에서 @font-face 문제 디버깅

IE8 및 기타 브라우저에서 원활하게 작동함에도 불구하고 @font-face는 IE9에서 표시 문제에 직면합니다. 이 문제는 특히 라이브 사이트에서 발생하는 반면, 사용자 컴퓨터에서 로컬로 보는 경우에는 아무런 문제가 없습니다.

문제의 CSS 코드는 다음과 같습니다.

@font-face {
                font-family: 'LeagueGothicRegular';
                src: url('league_gothic_0-webfont.eot');
                src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}

유사한 문제가 보고되었습니다. , IE9를 제외한 모든 IE 버전에서 글꼴이 작동합니다. 그러나 F12 개발자 도구를 통해 문서 모드를 변경하면 문제가 해결되지만 이상적으로는 아닙니다.

업데이트:

조사에 따르면 IE9는 .woff를 활용하는 것으로 나타났습니다. 의도한 .eot 버전 대신 글꼴 변형. Fontsquirrel @font-face 생성기로 생성된 전체 글꼴 변형을 포함하고 smileyface-local 기술을 사용하여 문제가 해결되었습니다.

@font-face {
  font-family: "LucidaFax-bold";
  src: url("_font/LucidaFax-bold.eot");
  src: local("☺"),
  url("_font/LucidaFax-bold.woff") format("woff"),
  url("_font/LucidaFax-bold.ttf") format("truetype"),
  url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
  }

h1 { font-family: "LucidaFax-bold", serif;}

또한 Mark "Tarquin" Wilton-Jones 텍스트- IE 버전 전체에서 일관된 시각적 스타일을 달성하기 위해 Shadow Hack이 사용되었습니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.