html - IE 中@font-face 的问题

标签 html css internet-explorer font-face

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

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

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

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

如有任何想法,我们将不胜感激。

对评论的回应:

这是字体: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;
}

最佳答案

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;

}

关于html - IE 中@font-face 的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8231524/

相关文章:

html - 显示与导航内联的图标

java - Selenium 远程驱动程序 - 在实现 InternetExplorerDriver 期间发生 NoSuchElementException

internet-explorer - IE 7 和 8 的 CSS 内框阴影

javascript - 如何使菜单除非在 jQuery 中单击否则不会折叠

html - 悬停 CSS 列表项时,更改父项 CSS

html - flex 容器的高度在 Safari 中无法正常工作

javascript - 通过 Jquery 更改 CSS - 我的代码有什么问题?

Javascript:如何修改我的代码以在主题发布后添加回消失的占位符

css - 对齐 WooCommerce 产品

javascript - 如何在 IE 中将鼠标悬停在图像上时删除下划线?