@字体-face ie问题

Question

我尝试了几种不同的方法，包括正确的字体在CSS中。我知道我需要eot版本的字体工作在IE上，但我无法让它识别它。我使用了字体松鼠来转换字体，并将.eot文件和.otf文件放在一个名为“字体”的文件夹中，这里是我的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 */
}

然后我又回到了松鼠字库，重新下载了新的工具包，并正确地重命名了所有的东西，它起了作用。

Answer 1

您需要为此设置访问控制-允许-源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");
}

在风松鼠身上，他们这样做

http://www.fontsquirrel.com/fontfacedemo/bebas-neue

下载@字体面板套件

@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

这段代码应该能让它正常工作。如果没有，请检查字体URL (如果存在)。

@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字体..。但我也用过其他字体类型。