@ font-face ie问题 [英] @font-face ie problems

问题描述

我已经尝试过几种不同的方法来在CSS中包含正确的字体。我知道我需要的eot版本的字体在IE上工作，但我不能让它识别它。我使用字体squirrel来转换字体，我把.eot文件和.otf文件放在一个名为fonts的文件夹下面是我的CSS：

I have tried a few different ways to include the correct fonts in the CSS. I know that I need the eot version for the font to work on IE, but I can't get it to recognize it. I have used font squirrel to convert the fonts, and I have placed the .eot file and .otf file in a folder called "fonts" Here is my CSS:

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

UPDATE
下面，我被带到这个网站： 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，

Then I went back to Font Squirrel, downloaded the kit fresh again, and renamed everything correctly, and it worked.

推荐答案

您需要设置Access-Control-Allow-Origin HTTP此标题

请参阅这里：

IE9阻止下载跨源网页字体

You need to set Access-Control-Allow-Origin HTTP Header for this
See here:
IE9 blocks download of cross-origin web font

这是否有效？ >

Does this work?

@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套件

Download the @font-face kit from there

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

}

这篇关于@ font-face ie问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！