我正在尝试使用来自 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/