IE 中@font-face 的问题
我正在尝试使用 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 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
Jason,您的
font-face
代码与我下载的工具包中的代码不太匹配。请注意第四行(我用一些注释的感叹号标记)与您的不同。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.