css - @font-face 仿粗体 ie7-ie8

Question

我一直在 IE7-8 中使用假粗体和斜体。我已经阅读了多篇关于此的文章，但它们都针对谷歌网络字体。我自己主持。请参阅此屏幕截图示例:

这是我编写样式声明的方式:

@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}

它们在 IE9 和 FF/webkit 中都可以正常工作，但无论我做什么，IE7-8 都会显示假粗体。 有什么我想念的吗？

(我还在我的代码中添加了粗体斜体和斜体，但在这里省略了它们)

Answer 1

我能解决这个问题的唯一可靠方法是在 IE 中为粗体声明一个不同的@font-face 名称。保留 CSS3 解决方案(如您发布的那样)，但使用不同的名称为粗体添加额外的声明。使用您的示例，它可能看起来像:

/* THESE FIRST TWO ARE LEFT THE SAME */
@font-face{
    font-family:"myfont";
    src:url("font.eot");
    src:url("font.eot?#iefix") format("embedded-opentype"),
        url("font.woff") format("woff"),
        url("font.ttf") format("truetype"),
        url("font.svg#a89d6ad1-a04f-4a8f-b140-e55478dbea80") format("svg");
    font-weight:normal;
    font-style:normal;
}
@font-face{
    font-family:"myfont";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
    font-style:normal;
    font-weight:bold;
}
/* SAME AS THE ABOVE BOLD FAMILY, BUT WITH A NEW NAME AND NO font-weight */
@font-face{
    font-family:"myfont-bold";
    src:url("bold.eot");
    src:url('bold.eot?#iefix') format('embedded-opentype'),
        url("bold.woff") format("woff"),
        url("bold.ttf") format("truetype"),
        url("bold.svg#ed104d8c-7f39-4e8b-90a9-4076be06b857") format("svg");
}

这里我没有使用“font-weight: bold”，因为在这种情况下会加倍加粗字体。

然后，您将这样的内容添加到您的 IE 6-8 CSS 文件:

b, strong, h1, h2, h3, h4, h5, h6, #top_navigation {
    font-family: 'myfont-bold', 'Arial Bold', Arial, times;
    font-weight: normal !important;
}

将您想要加粗的任何内容添加到列表中，并将“Arial Bold 等”替换为其他足够接近备份的类似字体。唯一的问题是如果字体没有加载，那些东西将有一个正常的重量。我认为这是值得冒的风险。

这里有一个很好的资源来更详细地解释这个问题:Banishing faux-italic and faux-bold on CSS3 fonts in IE 8 and below

祝你好运!