IE 中@font-face 的问题

发布于 2024-12-18 00:18:53 字数 877 浏览 9 评论 0原文

我正在尝试使用 fontsquirrel.com 的 @font-face 套件。我已经直接从他们提供的文件中提取了所有内容,但是当使用开发人员工具在 IE9 中进行测试时,我得到以下结果:

浏览器模式:IE9,文档模式:IE9 标准 - 字体正确渲染
浏览器模式:IE8,文档模式:IE8 标准 - 字体不渲染
浏览器模式:IE7,文档模式:IE7 标准 - 字体不渲染

令人好奇和恼火的是,当我从 @font-face 工具包查看演示文件时,它在上述所有三种情况下都能正确渲染。就像我说的,一切都是从提供的文件中复制/粘贴的。

我能想到的唯一区别是我使用的是 HTML5 Boilerplate。

任何想法将不胜感激。

回应评论:

这是字体:http://www .fontsquirrel.com/fonts/bebas-neue

我正在使用的CSS:

@font-face {
font-family: "BebasNeueRegular";
src: url('BebasNeue-webfont.eot?') format('eot'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}

I am trying to use a @font-face kit from fontsquirrel.com. I have pulled everything directly from the files they provide but when testing in IE9 using the developer tools I get the following results:

Browser Mode: IE9, Document Mode: IE9 standards - font renders correctly
Browser Mode: IE8, Document Mode: IE8 standards - font does not render
Browser Mode: IE7, Document Mode: IE7 standards - font does not render

The curious and infuriating thing is when I view the demo file from the @font-face kit it renders correctly in all three of the above situations. And like I said everything is copy/paste from the files provided.

The only difference I can think of is that I am using HTML5 Boilerplate.

Any thoughts would be appreciated greatly.

In Response to the comments:

Here is the font: http://www.fontsquirrel.com/fonts/bebas-neue

And the CSS I'm using:

@font-face {
font-family: "BebasNeueRegular";
src: url('BebasNeue-webfont.eot?') format('eot'),
     url('BebasNeue-webfont.woff') format('woff'),
     url('BebasNeue-webfont.ttf') format('truetype'),
     url('BebasNeue-webfont.svg#webfontfvFLBU0N') format('svg');
font-weight: normal;
font-style: normal;
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

影子的影子 2024-12-25 00:18:53

Jason,您的 font-face 代码与我下载的工具包中的代码不太匹配。请注意第四行(我用一些注释的感叹号标记)与您的不同。

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), /* !!! */
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Jason, your font-face code does not quite match what came in the kit I downloaded. Notice the fourth line (I marked with some commented exclaimations) is different than yours.

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), /* !!! */
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文