简体   繁体   中英

@font-face not working in IE9

I have the following code to style the font for my page, but somehow the @font-face working in mozilla but not in IE. Does anyone know what's going on here and how can I fix this?

@font-face {
  font-family: 'TrashHand';
  src: url('../fonts/TrashHand.ttf');
  }

@font-face {
  font-family: 'BebasNeue';
  src: url('../fonts/BebasNeue.otf');
  }  


.tab_g 
{
    background:url(../images/ss_tab_0.png) no-repeat;
    width:176px;
    height:42px;
    font: 25px 'TrashHand',Arial, Helvetica, sans-serif;
    font-weight:50;
    text-transform:uppercase;
    color:#ffffff;
    padding-top:10px;
    text-align:center;
    margin-bottom:-15px;
}

You should definitely check out something like Font Squirrel where you can upload your fonts and it will spit back the corresponding CSS. Guaranteed perfect in all browsers. Also, check out Paul Irish's bulletproof @font-face for more information on the topic.

It should look something like this:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM