Question

我尝试了几种不同的方法在CSS中包含正确的字体。我知道我需要eot版本的字体才能在IE上运行，但是我无法识别它。我使用字体squirrel转换字体，我已将.eot文件和.otf文件放在一个名为“fonts”的文件夹中。这是我的CSS：

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

更新因此，通过以下建议，我被引导到了这个网站：http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

我使用了CSS：

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

然后我回到Font Squirrel，再次将新工具包重新下载，并正确地重命名，并且有效。

Answer 1

您需要为此设置Access-Control-Allow-Origin HTTP标头见这里：
IE9 blocks download of cross-origin web font

这有用吗？

@font-face {
    font-family: 'BebasNeue';
    src: url('fonts/BebasNeue.eot');
    src: url('fonts/BebasNeue.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue.otf') format("opentype");
}

在Fontsquirrel上他们这样做了 http://www.fontsquirrel.com/fontfacedemo/bebas-neue

从那里下载@ font-face工具包

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot');
    src: url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.woff') format('woff'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.ttf') format('truetype'),
         url('/utils/load_demo_font.php?font=960/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Answer 2

此代码应该可以正常工作.. 如果没有，请检查您的字体网址（如果存在）。

@font-face {
  font-family: 'BebasNeue';
  src: url('fonts/BebasNeue.eot');
  src: local('BebasNeue'), local('BebasNeue'), url('fonts/BebasNeue.eot') format('embedded-opentype');
}

Answer 3

有时当您转换字体类型（其他TTF）时，字体不起作用。尝试使用TTF字体并将其转换..

我没有使用过TTF字体，但是我使用过其他字体类型。

Answer 4

这是我在我们网站（不是Neue）上为Bebas提供的css，但请注意网址：

@font-face {
    font-family: 'Bebas';
    src: url('../fonts/bebas-webfont.eot');
    src: url('../fonts/bebas-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/bebas-webfont.ttf') format('truetype'),
         url('../fonts/bebas-webfont.svg#bebasregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@ font-face即问题

4 个答案: