CSS @font-face not working in IE8

问题:

I have tried reading multiple articles on how to deal with custom fonts in IE, but they never seemed to work for me. I tried converting the fonts to EOT, but that didn't seem to work either. I am not sure what I am doing wrong, so I will post my code

@font-face {
  font-family: "Klavika Regular";
    src: url('../fonts/klavika.eot');
    src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

回答1:

this works in ie8/9

http://dev.bowdenweb.com/a/fonts/serif/alegreya/demo.html

@font-face {
    font-family: 'AftaserifRegular';
    src: url('AftaSerifThin-Regular-webfont.eot');
    src: url('AftaSerifThin-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('AftaSerifThin-Regular-webfont.woff') format('woff'),
         url('AftaSerifThin-Regular-webfont.ttf') format('truetype'),
         url('AftaSerifThin-Regular-webfont.svg#AftaserifRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

回答2:

if IE8 thinks it supports any other format other than eot of the ones listed below, then it will probably try to use that one. Maybe you could use a IE8 hack, like

src: local('☺'), url('../fonts/klavika.woff') format('woff'), url('../fonts/klavika.ttf') format('truetype'), url('../fonts/klavika.svg') format('svg');
src /*\**/: url('../fonts/klavika.eot')\9

so only IE8 will read the last src line and thus load the .eot.

回答3:

Try three kinds of CSS Formats for @font-face on FontSquirrel Generator (in "EXPERT..." mode > in section "CSS Formats:" > "more information")

回答4:

It's worth checking to see if your .htaccess file allows the file type.