CSS @font-face 在 IE8 中有效，但在 IE9 中无效
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4607560/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@font-face works in IE8 but not IE9
提问by DanC
As described above, I have issues with @font-face not displaying in IE9 although it displays fine in every other browser including IE8 and under. Additionally, when viewing locally on my computer, IE9 does display the font, just not when fully live.
如上所述，我遇到了 @font-face 无法在 IE9 中显示的问题，尽管它在包括 IE8 及更低版本在内的所有其他浏览器中都能正常显示。此外，在我的计算机上本地查看时，IE9 确实显示字体，只是在完全实时时不显示。
The site is:
该网站是：
The code used is:
使用的代码是：
@font-face {
font-family: 'LeagueGothicRegular';
src: url('league_gothic_0-webfont.eot');
src: local('League Gothic Regular'), url('league_gothic_0-webfont.woff') format('woff'), url('league_gothic_0-webfont.ttf') format('truetype'), url('league_gothic_0-webfont.svg#webfonta36nFpyE') format('svg');font-weight: normal;font-style: normal;
}
Anyone any ideas why this might be occurring?
任何人都知道为什么会发生这种情况？
Cheers!
干杯!
=============================================
==============================================
EDIT
编辑
I have found the following site that displays the same font ok in IE9, anyine any ideas how he did that?
我发现以下网站在 IE9 中显示相同的字体，您知道他是如何做到的吗？
回答by Tobias
No answer, just confirmation: I have a similar kind of problem. Font works in all other IE versions except IE9, both using IETester and original browser. When changing Document Mode (F12 dev tools) font works. Not how I'd like it though.
没有答案，只是确认：我有类似的问题。字体适用于除 IE9 之外的所有其他 IE 版本，均使用 IETester 和原始浏览器。更改文档模式（F12 开发工具）字体时有效。虽然不是我想要的。
Update: With some trickery I managed to get it working. Seems like IE9 is using the .woffversion of the font (which I had excluded) over the .eotthat I thought it would. I used the @font-face generatorfrom fontsquirrelto get all the different font variations and included them in my project, using the smileyface-local. Did not have to alter my .htaccess file. Now works fine and looks the same in all IE versions:
更新：通过一些技巧，我设法让它工作。似乎 IE9在我认为会的.eot上使用了.woff版本的字体（我已经排除了）。我使用@字体面发生器从fontsquirrel把所有的不同的字体变化，其中包括他们在我的项目，使用smileyface-local。不必更改我的 .htaccess 文件。现在工作正常并且在所有 IE 版本中看起来都一样：
@font-face {
font-family: "LucidaFax-bold";
src: url("_font/LucidaFax-bold.eot");
src: local("?"),
url("_font/LucidaFax-bold.woff") format("woff"),
url("_font/LucidaFax-bold.ttf") format("truetype"),
url("_font/LucidaFax-bold.svg#LucidaFax-bold") format("svg");
}
h1 { font-family: "LucidaFax-bold", serif;}
(I even got mad fresh using Mark "Tarquin" Wilton-Jones' text-shadowhack, applying same look to IE versions as rest of the browser world. Old school? Looks great! Was it worth it? Well, learned a lot.;)
（我什至使用 Mark “Tarquin” Wilton-Jones 的text-shadowhack 对 IE 版本应用与浏览器世界的其他部分相同的外观。老派？看起来很棒！值得吗？嗯，学到了很多。;)
回答by Richard Slater
I have just had the very same problem with Web Fonts hosted on an IIS7 site, as suggested by Grillzthe issue was down to MIME Types.
我刚刚遇到了托管在 IIS7 站点上的 Web 字体的相同问题，正如Grillz所建议的，问题归结为 MIME 类型。
I have elected to use "application/octet-stream" based upon the answers to the Mime type for WOFFquestion.
我选择根据对 WOFF问题的Mime 类型的答案使用“应用程序/八位字节流” 。
- Open IIS and select the site that hosts the fonts (must be the same domain name for IE9 and Firefox)
- Double click "Mime Types"
- Click "Add..." in the top right hand corner.
- In "File name extension:" enter ".woff"
- In "MIME type:" enter "application/octet-stream"
- 打开 IIS 并选择托管字体的站点（IE9 和 Firefox 的域名必须相同）
- 双击“Mime 类型”
- 单击右上角的“添加...”。
- 在“文件扩展名：”中输入“.woff”
- 在“MIME 类型：”中输入“application/octet-stream”
Hope that saves someone 10 minutes in the future.
希望将来可以为某人节省 10 分钟。
回答by Chris Moschini
For us the trick was to just change the format on the .eot files we're serving up.
对我们来说，诀窍是更改我们提供的 .eot 文件的格式。
Works in IE6-9, Firefox 3-4, Chrome, Safari, Android, iPhone.
适用于 IE6-9、Firefox 3-4、Chrome、Safari、Android、iPhone。
@font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('eot'),
url('/ui/museo300.ttf') format('truetype')
}
Becomes:
变成：
@font-face {
font-family: 'Museo';
src: url('/ui/museo300.eot?') format('embedded-opentype'),
url('/ui/museo300.ttf') format('truetype')
}
回答by Abalore
My solution is to declare two different fonts:
我的解决方案是声明两种不同的字体：
@font-face {
font-family: "Dereza bold";
src: local("Dereza bold"), url("../../assets/otf/dereza_bold.otf") format("opentype");
}
@font-face {
font-family: "IE Dereza bold";
src: url("../../assets/eot/dereza_bold.eot");
}
And then:
进而：
.divclass {
font-family: "Dereza bold", "IE Dereza bold";
}
回答by Дмитрий Погодаев
Abalore +1
鲍鱼 +1
My solution:
我的解决方案：
@font-face {
font-family: "OfficinaSansBookSCC";
src: url('font/OfficinaSansBookSCC.eot');
src: url('font/OfficinaSansBookSCC.eot') format('embedded-opentype'),
url( 'font/OfficinaSansBookSCC.ttf' ) format("truetype");
}
working in IE 7-9, chrome, opera, firefox.
在 IE 7-9、chrome、opera、firefox 中工作。
first line needed for IE 9, second for IE 7-8.
IE 9 需要第一行，IE 7-8 需要第二行。
回答by TheKing2
In IE9 - F12 look at the debug screen see if there are any CSS3117 errors. See also: IE9 blocks download of cross-origin web font
在 IE9 - F12 中查看调试屏幕，看看是否有任何 CSS3117 错误。另请参阅：IE9 阻止下载跨域 Web 字体
回答by Gregg B
Well since you've edited your post the below text won't be the answer. Are you pointing to the correct directory? Any chance of this being a mime type issue from the server?
好吧，既然你已经编辑了你的帖子，下面的文字就不是答案了。你指向正确的目录吗？这是来自服务器的 mime 类型问题的可能性吗？
====================================================
================================================== ==
This might be it:
这可能是：
It's important to note that your site must render in documentMode 9 in order to take advantage of the new features included with IE9 (that includes all new features in IE9, not only the ones related to web fonts). If you haven't heard of documentMode before, Microsoft has put together a guidewhich explains what it is and how you can use it on your site.
请务必注意，您的站点必须以 documentMode 9 呈现，以便利用 IE9 包含的新功能（包括 IE9 中的所有新功能，而不仅仅是与 Web 字体相关的功能）。如果您之前没有听说过 documentMode，Microsoft 已经整理了一份指南，解释了它是什么以及如何在您的站点上使用它。
from http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
来自http://blog.typekit.com/2010/09/03/typekit-adds-experimental-support-for-ie9/
回答by libbynotzoey
Font Squirrelalso provides a wonderful generator tool to help you create a font kit that will include the required formats, already-written CSS, and even a demo page to see how it's all used, along with help with problems you may encounter.
Font Squirrel还提供了一个很棒的生成器工具，可以帮助您创建一个字体工具包，其中包含所需的格式、已经编写的 CSS，甚至还有一个演示页面，用于查看所有内容的使用方式，以及您可能遇到的问题的帮助。
It was a breeze to incorporate its output into my site and it did fix the problem perfectly.
将它的输出合并到我的网站是一件轻而易举的事，它确实完美地解决了这个问题。
回答by user3819978
I had this problem. Turns out I was missing a comma in the font-family declaration.
我有这个问题。原来我在 font-family 声明中遗漏了一个逗号。
回答by JayD3e
I wanted to add yet another thing that could possibly go wrong in this scenario. IE9 has a rule that discards all @font-face declarations that can not be cached after the first load. IE9 will actually use the font correctly on the first display, but on subsequent refreshes, the @font-face will be disabled. I discovered this after closing my browser by chance, and then reopening it to find that my font was working mysteriously, only to stop working one refresh later.
我想添加在这种情况下可能会出错的另一件事。IE9 有一个规则，即丢弃所有在第一次加载后无法缓存的 @font-face 声明。IE9 实际上会在第一次显示时正确使用字体，但在后续刷新时，@font-face 将被禁用。我偶然关闭浏览器后发现了这一点，然后重新打开它，发现我的字体神秘地工作，只是后来停止工作。
To fix this, you simple need to make sure that the request serving your font has a Cache-Controlresponse header of something other than no-cache. I would recommend setting it to max-age=3600. This will ensure your font is cached for an hour. IE9 will then be able to display your font consistently.
要解决此问题，您只需确保为您的字体提供服务的请求具有Cache-Control除no-cache. 我建议将其设置为max-age=3600. 这将确保您的字体被缓存一个小时。然后 IE9 将能够始终如一地显示您的字体。
