0

我一直在 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 都会显示人造粗体。有什么我想念的吗？

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

4

1 回答 1

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 等”替换为足够接近备份的其他类似字体。唯一的问题是如果字体没有加载，这些东西会有正常的重量。我认为这是一个值得冒的风险。

这是一个很好的来源，更详细地解释了这个问题：在 IE 8 及以下版本中消除 CSS3 字体上的仿斜体和仿粗体

祝你好运！

于 2013-10-18T06:57:53.910 回答