自定义字体在 IE 中出现问题答案

【问题标题】：Custom font is having problems in IE自定义字体在 IE 中出现问题
【发布时间】：2013-03-04 18:12:20
【问题描述】：

这是我的样式表的顶部：

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
body{
    font-family:"Open Sans";
    background-image:url(images/greyFadeBG.jpg);
    background-repeat:repeat-x;
    background-color:#ffffff;
    margin:0px;
    padding:0px;
    height:100%;
    min-width:870px;
    font-size:14px;
    color:#666666;
}

这会在 IE（9 和 10）中显示自定义字体如果我从 font-family:"Open Sans" 更改行； to font-family:"Open Sans", sans-serif;

IE7会显示自定义字体，但所有IE版本都会显示san-serif字体。

我已经从 Font Squirrel 尝试过这个，但没有运气：

@font-face {
    font-family: 'open_sansregular';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

有什么想法吗？

【问题讨论】：

@font-face 在 IE8 及更低版本中不受支持，IE9+ 仅支持可扩展的开放式 (.eot) 字体。
@jimjimmy1995，IE 是第一个支持@font-face（在 5.5 版本中）的浏览器，IE 9 增加了对 EOT 以外的格式的支持；见caniuse.com/fontface
那么问题出在哪里？ IE 9 支持 WOFF 格式，IE 8 不支持。要使可下载字体（“自定义字体”）适用于所有浏览器，请使用 FontSquirrel 代码中所示的替代字体格式。但自然地，您必须使用与 font-family 声明中的 body 或其他元素相同的字体名称。您应该准确说明您是如何尝试使用 FontSquirrel 方式的（完整的演示代码）。

标签： css internet-explorer fonts

【解决方案1】：

要使第二个 @font-face 正常工作，您需要将 body font-family 更改为

body{
    font-family: "open_sansregular";
}

或者更好

body{
  font-family: "Open Sans", "open_sansregular", sans-serif;
}

【讨论】：

这有帮助！我只需要在最后添加 sans-serif 以使其工作：font-family:"Open Sans","open_sansregular", sans-serif;