@font-face 在 IE7 中不起作用答案

【问题标题】：@font-face is not working in IE7@font-face 在 IE7 中不起作用
【发布时间】：2012-07-17 22:49:18
【问题描述】：

我在 /css 中有一个 CSS 文件，在 /images 中有一个字体。我的 CSS 代码使用 @font-face，它可以在 IE8、IE9 和所有不错的浏览器中运行，但显然不能在 IE7 中运行。

@font-face {
    font-family: 'ChunkFiveRegular';
    src: url('../image/chunkfive-webfont.eot');
    src: url('../image/chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url(../images/chunkfive.woff) format('woff'), url(../images/chunkfive-webfont.ttf) format('truetype'), url(../images/chunkfive-webfont.svg) format('svg');
    font-weight: normal;
    font-style: normal;
}

h1, h2, h3 {
    font-family: ChunkFiveRegular, Georgia, serif;
    font-weight: normal;
    text-transform: uppercase;
}

为什么文本仍然显示为格鲁吉亚？

【问题讨论】：

你能给我们一个页面链接吗？
如果你的字体在/images，你需要使用/images，而不是/image。此外，'eot' 应该比'embedded-opentype' 工作得更好。也就是说，您的字体属于/css；字体不是图像。
@PointedEars 这就是问题所在。介意将其发布为答案吗？

标签： css internet-explorer font-face

【解决方案1】：

如果你的字体是/images，你需要使用/images，而不是/image。也就是说，您的字体属于/css；字体不是图像。

另外，根据Paul Irish's article，'eot' 应该比'embedded-opentype' 工作得更好（未经测试）。

【讨论】：

使用 'eot' 或 '☺' 会导致 IE9 忽略 EOT 而使用 WOFF。我发现在大多数情况下，压缩的 EOT 实际上比 WOFF 小，因此更可取。

【解决方案2】：

http://www.thecssninja.com/demo/css_fontface/

@font-face {
font-family:InYourFace;
src: url('Ubuntu-B.eot');
// this smile and ? fix your problem
// because IE don't wanl load local font without this hack
src: url('Ubuntu-B.eot?') format('☺'),  
    url('Ubuntu-B.woff') format('woff'),
    url('Ubuntu-B.ttf') format('truetype'),
    url('Ubuntu-B.svg#webfontssbCkuz5') format('svg');
}

【讨论】：