내 @font-face가 IE9를 제외한 모든 브라우저에서 작동하는 이유는 무엇입니까?

@font-face 수수께끼: 다른 브라우저에서 작동하는 동안 IE9의 표시 문제

기묘한 웹 타이포그래피 결함 사례에서 사용자는 @font-face에서 예외가 발생했습니다. 문제의 글꼴은 IE9를 제외한 모든 브라우저에서 완벽하게 렌더링되어 사용자를 당황하게 만듭니다. 더욱이 글꼴은 로컬 버전의 웹 사이트에서는 설명할 수 없지만 라이브로 배포되면 사라집니다.

문제의 웹 사이트 bigwavedesign.co.uk/gcc/gcc/는 다음 @font-face 선언을 활용합니다.

    @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;
}

이러한 이상 현상으로 인해 사용자는 잠재적인 원인을 조사해야 했습니다. 놀랍게도 그들은 다른 웹사이트인 iamthomasbishop.com이 IE9에서 동일한 글꼴을 성공적으로 렌더링했다는 사실을 발견했습니다. 이 사이트가 어떻게 이런 성과를 달성했는지는 여전히 수수께끼로 남아 있습니다.

결국 이 문제는 IE9가 .eot 버전보다 .woff 글꼴 버전을 선호하는 데서 비롯된 것으로 의심되었습니다. smileyface-local 서브루틴을 사용하여 프로젝트에 다양한 글꼴 변형을 통합하여 문제를 해결했습니다. 업데이트된 코드는 이제 모든 IE 버전에서 원활하게 작동합니다.

@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");
  }

따라서 IE9에서 누락된 글꼴에 대한 미스터리가 풀렸으며 이는 웹 디자인에서 브라우저별 특성을 고려하는 것의 중요성과 글꼴의 힘을 보여줍니다. 기술적 과제를 극복하기 위한 공동 문제 해결.

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