2012-03-01 2 views
6

내 CSS에 다음 줄이 있습니다.font-face가 IE8에서 작동하지 않는 것 같습니까?

@font-face { font-family: Keffeesatz; src: url(/Styles/YanoneKaffeesatz-Light.otf) format("opentype") } 
@font-face { font-family: KeffeesatzBold; src: url(/Styles/YanoneKaffeesatz-Bold.otf) format("opentype") } 

IE9에서는 다음과 같이 표시됩니다. IE8에서는 대체 글꼴 인 Arial을 사용합니다. IE8에서 어떻게 작동합니까?

+0

를 살펴 보자. 사용자 정의 글꼴이 크로스 브라우저에서 작동하려면 글꼴을 여러 가지 형식으로 사용할 수 있어야합니다. –

+0

fontsquireel의 생성기가 저를 위해 작동하지 않는 것 같습니다. 파일을 업로드 한 후에도 파일이 업로드되지 않았으며 제공되는 다운로드에 글꼴이 없다고 표시됩니다. 나는 FireFox 10과 IE8을 모두 시험했다. 오늘 밤 집에 갈 때 다른 브라우저를 사용해 보겠습니다. –

+0

FontSquirrel의 웹 사이트는 오늘 저에게 정말로 느립니다. 그들이 문제가 있는지 궁금해. 또한 [google 웹 글꼴] (http://www.google.com/webfonts)에서 어떻게 작동하는지 확인할 수 있습니다. –

답변

15

이전 버전의 IE에서 글꼴을 삽입하려면 글꼴의 EOT 버전을 제공해야합니다. 다른 형식을 인식하지 못하기 때문에 Arial에 대한 폴백을 관찰하는 것입니다.

글꼴을 Font Squirrel @font-face Generator으로 가져 가면 기존 글꼴보다 새로운 CSS @font-face 규칙을 포함하여 모든 것을 준비하게됩니다.

+0

마침내 Font Squirrel이 나를 도와주었습니다. 출력을 사랑해! 환상적! 감사! –

1

Internet Explorer는 적어도 아직 CSS3에서 .ttf (TrueType) 또는 .otf (OpenType) 글꼴을 인식하지 못합니다. IE는 .eot (Embeddable Open Type)을 인식합니다.

@font-face { 
font-family: 'MyWebFont'; 
src: url('webfont.eot'); /* IE9 Compat Modes */ 
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
    url('webfont.woff') format('woff'), /* Modern Browsers */ 
    url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
} 

는 [fontsquirrel의 발전기 (http://www.fontsquirrel.com/fontface/generator)를 통해 폰트를 실행 시도하고 밖으로 크랭크 것을 볼 here

+1

IE9는 이미 가장 일반적인 글꼴 형식을 인식합니다. – BoltClock

+2

예 (예 : 호환 모드가 아님) – koffster