@ font-face即问题

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阻止跨源Web字体的下载

这有用吗？

@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;

}