Question

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

enter image description here

以下是我编写样式声明的方法：

@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

祝你好运！

@ font-face faux bold ie7-ie8

1 个答案: