字体粗细：@font-face 加粗在 IE9 中不起作用答案

【问题标题】：font-weight: bold with @font-face not working in IE9字体粗细：@font-face 加粗在 IE9 中不起作用
【发布时间】：2013-08-10 05:39:18
【问题描述】：

我正在使用@font-face 来定义我自己的字体：

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_regular-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_regular-webfont.woff') format('woff'),
         url('fonts/helvlight_regular-webfont.ttf') format('truetype'),
         url('fonts/helvlight_regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{ 
    font-family: HelveticaNeue;
    src: url('fonts/helvlight_bold-webfont.eot');
    src: local("☺");
    src: url('fonts/helvlight_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/helvlight_bold-webfont.woff') format('woff'),
         url('fonts/helvetica_bold-webfont.ttf') format('truetype'),
         url('fonts/helvlight_bold-webfont.svg#webfont') format('svg');
    font-weight: bold;
    font-style: normal;
}

font-face 规则是在 Font Squirrel 上生成的，然后我添加了 font-weight 和 font-style 规则。我在 CSS 中使用我的自定义字体，如下所示：

body {
    font: 16px HelveticaNeue, Verdana, sans-serif;
    color: black;
}

h1 {
    font-weight: bold;
    font-size: 2em;
}

它在 Chrome、Firefox、Opera 和 Safari 中运行良好，但在 Internet Explorer 中无法运行。

我试过这个@font-face works in IE8 but not IE9 没有成功。

我还尝试将粗体样式的字体名称更改为 HelveticaNeueBold 并像这样使用它：

h1 {
    font-family: HelveticaNeueBold;
    font-size: 2em;
}

它有效，但这当然不是我想要的。在粗体之后添加 !important 也无济于事。有什么建议我做错了吗？

【问题讨论】：

就个人而言，我总是为不同的字体粗细使用不同的名称。如果它有效，你为什么不想那样做呢？ :D
@KaijuJu 我看起来并不丑，它违背了字体粗细的目的。但看来我没有其他选择了，是吗？
我对 CSS font-face 属性不够专业，但它似乎是最常见的解决方案。对不起:(

标签： css internet-explorer font-face

【解决方案1】：

IE 不支持使用不同于@font-face 规则中指定的font-weight。

您可以在此处阅读更多信息：@font-face IE9 font-weight doesn't work

【讨论】：

谢谢你，我搜索的时候没有找到你发布的链接。