Question

我使用我的一些图标Font Awesome进行了自定义。

当我在Chrome中使用它时，它运行正常，但不适用于IE。

这是我的CSS：

@font-face {
    font-family:'FontAwesome';
    src:url('/assets/font-awesome/fonts/FontAwesome.eot');
    src:url('/assets/font-awesome/fonts/FontAwesome.eot?#iefix') format('embedded-opentype'),
      url('/assets/font-awesome/fonts/FontAwesome.woff') format('woff'),
      url('/assets/font-awesome/fonts/FontAwesome.ttf') format('truetype'),
      url('/assets/font-awesome/fonts/FontAwesome.svg') format('svg');
    font-weight:normal;
    font-style:normal
}

任何人都可以帮助我？

Answer 1

在IE（最高版本9）中，处理属性src是一个错误，所有其他属性IE都被视为URL的一部分，它试图去获取404.

看第三行，你可以看到＆＃34;＃＆＃34;？ IE仍然会考虑URL的其余部分，但URL现在看起来像这样：

myfont-webfont.eot＃＆＃39;）格式（＆＃39; eot＆＃39;）......等等......格式（＆＃39; svg＆＃39;

这是一个简单而美丽的技巧。

@font-face {
    font-family: 'MyFontFamily';
    src: url('myfont-webfont.eot#') format('eot'), 
         url('myfont-webfont.woff') format('woff'), 
         url('myfont-webfont.ttf')  format('truetype'),
         url('myfont-webfont.svg#svgFontName') format('svg');
    }

或

@font-face {
  font-family: 'MyFontFamily';
  src: url('myfont-webfont.eot?') format('eot'), 
       url('myfont-webfont.woff') format('woff'), 
       url('myfont-webfont.ttf')  format('truetype'),
       url('myfont-webfont.svg#svgFontName') format('svg');
  }

Answer 2

我只是添加了一件小事： IE for Windows Phone（仅适用于WP）不支持webfonts - 耻辱:(

自定义字体 - 真棒+ IE

2 个答案: