@font-face在IE中的问题

Question

我尝试了几种不同的方法来在CSS中包含正确的字体。我知道我需要eot版本的字体才能在IE上工作，但是我无法让它识别它。我已经使用font 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，重新下载了包，并正确地将所有内容重命名，这样就可以正常运作了。

- radleybobins

---

可能是路径问题。路径必须相对于CSS的URL。因此，当CSS在文件夹“css”中，而字体在文件夹“onts”中时，您需要编写url（'../fonts/[...]')。 - yunzen

好的，我现在会尝试一下，但是为什么其他字体类型可以工作而.eot文件不行呢？ - radleybobins

对我来说路径似乎是正确的，我的CSS文件与所有.php文件在我的主文件夹中，然后有一个名为“fonts”的文件夹。 - radleybobins

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;

}

- yunzen

---

在Font Squirrel上没有BebasNeue的Open Type字体。 - yunzen

该死！我非常希望那能够成功，但结果还是一样。这很奇怪，直到 IE 在我的电脑上更新之前，这一切都运行得很好，现在它在任何版本的IE上都不能工作了...我知道这只是巧合，但真的很让人沮丧。 - radleybobins

如果不行，请使用IE的开发人员工具检查网络（按F12）。加载了哪些文件？ - yunzen

你的域名是否不同？也许页面在www.example.com而CSS在example.com上吗？ - yunzen

好的，使用那个网站最终引导我到了这个网站：http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax。我重新开始，最终它成功了...我会正确地更新我的代码。感谢你和我一起努力。 - radleybobins

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');
}

- Alaa Badran

---

当我尝试这样做时，在IE中出现了错误CSS3111：@font-face遇到未知错误，BebasNeue.eot.eot... 我删除了其中一个.eot并得到了类似的错误。 - radleybobins

该文件确实存在于文件位置。 - radleybobins

Answer 3

有时候当你转换字体类型（非TTF）时，字体可能无法正常工作。尝试使用TTF字体并进行转换。

我没有在TTF字体上遇到过这种情况，但是在其他字体类型上却遇到了。

- Alaa Badran

Answer 4

这是我们网站上用于Bebas的CSS（不是Neue），但请注意URL：

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

- Devon Huxtable