CSS IE 浏览器（IE6、7、8）是否支持 @font-face？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5127409/
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
Do IE browsers (IE6, 7, 8) support @font-face?
提问by Grace Ladder
According to this article, http://www.standardista.com/css3/font-face-browser-supportIE supports @font-facebut I couldn't find any site which has valid custom font face working for IE
根据这篇文章，http://www.standardista.com/css3/font-face-browser-supportIE 支持，@font-face但我找不到任何具有适用于 IE 的有效自定义字体的站点
Also, if IE supports custom font via @font-facefrom early on (IE6), then why people still using cufon for instance?
另外，如果 IE@font-face从早期（IE6）开始就支持自定义字体，那么为什么人们仍然使用 cufon？
Any clarifications or examples?
有什么说明或例子吗？
回答by Yi Jiang
Older version of Internet Explorer supports Embedded OpenType (EOT)files before @font-facewas formalized in CSS3. You can find compatible files on sites like FontSquirrelor Google's Font API. FontSquirrel's conversion tool should also help here. Also worth a read would be the latest bulletproof syntax recommended by fontspringto embedding multiple files for multiple browsers.
旧版本的 Internet Explorer在 CSS3 中正式化之前支持嵌入式 OpenType (EOT)文件@font-face。您可以在FontSquirrel或Google 的 Font API等网站上找到兼容文件。FontSquirrel 的转换工具在这里也应该有所帮助。同样值得一读的是fontspring 推荐的最新防弹语法，用于为多个浏览器嵌入多个文件。
The fact that this wasn't used frequently until recently is two-folds; first there are legal issues with using @font-facefonts - copyrights to be specific. Unlike cufon which only retains the shape of the fonts, with @font-faceyou are transmitting the actual fonts themselves, which has legal implications.
直到最近才经常使用它的事实有两个方面；首先，使用@font-face字体存在法律问题- 具体而言是版权。与仅保留字体形状的 cufon 不同，@font-face您正在传输实际字体本身，这具有法律含义。
The other problem is support in other browsers - Firefox 3 was the last of the modern browsers to not support @font-facein some way, so before Firefox 3.5's release in mid-2009 @font-facewas still not viable. In addition to all that there are differences in format support between the browsers, so the development of the technology is slow.
另一个问题是其他浏览器的支持——Firefox 3 是最后一个@font-face以某种方式不支持的现代浏览器，所以在 2009 年年中发布 Firefox 3.5 之前@font-face仍然不可行。此外，浏览器之间在格式支持方面存在差异，因此该技术的发展缓慢。
回答by Vyke
Internet Explorer 9 requires an EOT type font. TTF fonts can be used in most of the other recent browser versions and SVG for devices like iPhone and iPad. You can read more about browser support for @font-face here http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp
Internet Explorer 9 需要 EOT 字体。TTF 字体可用于大多数其他最近的浏览器版本和适用于 iPhone 和 iPad 等设备的 SVG。您可以在http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp阅读更多关于浏览器对 @font-face 的支持
Font Squirrel is also a great resource for creating web font files including EOT from your existing font files. Please be sure you have a licence to use the fonts on the web. You can access the free web font file generator here: http://www.fontsquirrel.com/fontface/generator
Font Squirrel 也是一个很好的资源，可用于从现有字体文件创建 Web 字体文件，包括 EOT。请确保您拥有在网络上使用字体的许可。您可以在这里访问免费的网络字体文件生成器：http: //www.fontsquirrel.com/fontface/generator
A typical CSS entry for an @font-face set looks like this:
@font-face 集的典型 CSS 条目如下所示：
@font-face
{
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
src: url('/some/directory/custom-font.eot?#iefix') format('embedded-opentype'),
url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Then you can call your font by assigning the "font-family" attribute using css
然后你可以通过使用 css 分配“font-family”属性来调用你的字体
.my-class { font-family: "custom-font" }
回答by SiwyPL
You can also write:
你也可以写：
@font-face {
font-family: 'custom-font';
src: url('/some/directory/custom-font.eot');
}
@font-face {
font-weight: normal;
font-style: normal;
font-family: 'custom-font';
src: url('/some/directory/custom-font.woff') format('woff'),
url('/some/directory/custom-font.ttf') format('truetype'),
url('/some/directory/custom-font.svg#webfont') format('svg');
}
Works as well as the example above, without using the "?" mark.
与上面的示例一样有效，无需使用“？” 标记。
回答by rustyx
Yes they do starting with IE6*. A working example.
是的，他们确实从 IE6* 开始。一个工作示例。
The font must follow some special rules though, for example the font name must begin with the family name and the family-name in the CSS must match the family name of the font.
但是字体必须遵循一些特殊规则，例如字体名称必须以系列名称开头，并且 CSS 中的系列名称必须与字体的系列名称匹配。
If you use the font squirrel webfont generatorto generate an .eot from a .ttf, it will ensure the generated .eot is usable on IE6.
如果您使用 font squirrel webfont generator从 .ttf 生成 .eot，它将确保生成的 .eot 在 IE6 上可用。
* Beware that there are aliasing issueswith custom fonts rendering in IE6/7/8.
* 请注意，在 IE6/7/8 中渲染自定义字体存在锯齿问题。
