css font-face 代码在 IE7 / 8 上不起作用答案

【问题标题】：css font-face code not working on IE7 / 8css font-face 代码在 IE7 / 8 上不起作用
【发布时间】：2012-11-07 18:59:41
【问题描述】：

我使用 font-squirrel 生成 Web 字体并为字体指定 CSS 声明，但当我使用 IE7 或 IE8 浏览器和文档模式在 IE9 中查看页面时，它仍然使用备用字体。知道发生了什么吗？这是我的代码（和屏幕截图）：

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


.cubano { font-family: 'cubanoregular' }

【问题讨论】：

标签： css internet-explorer fonts internet-explorer-7 font-family

【解决方案1】：

如果你上面的代码是准确的，那么唯一的问题是你eot文件的路径不正确：

src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');...

修复它，它应该可以正常工作。我相信 IE 从版本 5 开始就支持 @font-face，但在 9 之前的版本中，仅支持 eot。

【讨论】：

【解决方案2】：

您的代码没有问题，问题似乎出在字体上。但如果你愿意，它在Typekit 上。

【讨论】：

我什至尝试过 typekit，但它不工作......也许是因为我在 IE7 模式下通过 IE9 看这个？因为我在 Mac 上通过 Parallels 使用 Windows？

【解决方案3】：

检查您的src 路径是否正确

src: url('../fonts/cubano/cubano/../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
    src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
        url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');

可能需要

src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot');
src: url('../fonts/cubano/cubano-regular-webfont.woff-webfont.eot?#iefix') format('embedded-opentype'),
    url('../fonts/cubano/cubano-regular-webfont.woff-webfont.woff') format('woff'),
    url('../fonts/cubano/cubano-regular-webfont.woff-webfont.ttf') format('truetype'),
    url('../fonts/cubano/cubano-regular-webfont.woff-webfont.svg#../fonts/cubano/cubanoregular') format('svg');

【讨论】：