Question

根据这篇文章，http://www.standardista.com/css3/font-face-browser-support IE支持@font-face，但我找不到任何有效的自定义字体面向IE工作的网站

另外，如果IE从早期开始通过@font-face支持自定义字体（IE6），那么为什么人们仍然使用cufon呢？

任何澄清或示例？

Answer 1

旧版本的Internet Explorer支持Embedded OpenType (EOT)文件，然后在CSS3中正式化@font-face。您可以在FontSquirrel或Google's Font API等网站上找到兼容的文件。 FontSquirrel的转换工具也应该有帮助。另外值得一读的是the latest bulletproof syntax recommended by fontspring为多个浏览器嵌入多个文件。

直到最近才频繁使用的事实是双重的;首先，使用@font-face字体存在法律问题 - 版权具体。与仅保留字体形状的cufon不同，@font-face用@font-face传送实际字体，这具有法律含义。

另一个问题是其他浏览器的支持 - Firefox 3是最后一种不支持@font-face的现代浏览器，所以在Firefox 3.5于2009年中期发布之前{{1}}是仍然不可行。除了浏览器之间的格式支持存在差异外，所以技术的发展很慢。

Answer 2

Internet Explorer 9需要EOT类型字体。 TTF字体可用于大多数其他最近的浏览器版本和SVG用于iPhone和iPad等设备。您可以在此处阅读有关@ font-face http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp

的浏览器支持的更多信息

Font Squirrel也是创建网络字体文件的绝佳资源，包括现有字体文件中的EOT。请确保您拥有使用网络上字体的许可。您可以在此处访问免费的Web字体文件生成器： http://www.fontsquirrel.com/fontface/generator

@ 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');
}

然后，您可以通过使用css

指定“font-family”属性来调用您的字体

.my-class { font-family: "custom-font" }

Answer 3

你也可以写：

@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');
}

与上面的例子一样，不使用“？”标记

Answer 4

是的，他们从IE6 *开始。工作example。

字体必须遵循一些特殊规则，例如字体名称必须以系列名称开头，CSS中的系列名称必须与字体的系列名称匹配。

如果您使用字体squirrel webfont generator从.ttf生成.eot，它将确保生成的.eot在IE6上可用。

*请注意IE6 / 7/8中有aliasing issues个自定义字体呈现。

IE浏览器（IE6,7,8）是否支持@ font-face？

4 个答案: