定义 CSS @Font-Face 粗体斜体

我正在开展一个项目，其中我正在使用的字体有六种粗细/样式。这些包括：常规、斜体、半粗体、半粗斜体、粗体和粗体斜体。我有 @font-face 标签设置（理论上）它们应该显示的方式。然而，现实中发生的情况是粗体始终是斜体。是否有办法声明这些粗体+斜体的粗细，以便它们能够正常工作？我不想到处调用不同的字体系列名称。理想情况下，我应该能够声明正确的粗细和样式并获得正确的字体版本。

@font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bold-webfont.eot');
    src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bold-webfont.woff') format('woff'),
         url('agaramondpro-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bolditalic-webfont.eot');
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bolditalic-webfont.woff') format('woff'),
         url('agaramondpro-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic, oblique;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-italic-webfont.eot');
    src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-italic-webfont.woff') format('woff'),
         url('agaramondpro-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic, oblique;
    }

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

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibold-webfont.eot');
    src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibold-webfont.woff') format('woff'),
         url('agaramondpro-semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibolditalic-webfont.eot');
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibolditalic-webfont.woff') format('woff'),
         url('agaramondpro-semibolditalic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic, oblique;
    }

有什么想法可以让它发挥作用吗？

这可能不是您正在寻找的技术答案，但是为什么您需要使用三种粗细（reg、semi 和粗体，暂时忽略斜体）？

您可能会发现这些权重之间的对比度不足以保证在一页内使用所有三个权重。您想要使用不同粗细的字体在布局中创建不同的层次结构；两个权重，再加上大小、大写和颜色的变化就足够了。

具有多种粗细的字体可能包括以下字体：Hairline；薄的;光;常规的;中等的;半粗体；大胆的;黑色的;重（每个都有斜体版本）。该范围的极端不应该用于设置长文本块，而只能用于大显示尺寸或顶级标题。然后，您可以在主体文本的“浅色”和“粗体”位置之间选择两个粗细，在大多数情况下，选择至少相距两个位置的粗细——“浅色”和“中等”，或“常规”和“粗体”——以获得足够的对比度。太多的对比会破坏沉浸式阅读；例如，不要将 Light 与 Bold 配对。

如果您需要额外的中间粗细用于特殊目的（例如，您可能在深色背景上设置了白色文本，因此半粗体会很好），那么您可以为偶尔使用创建一个单独的类，而样式-正常连接字体系列声明中的四种常规粗细和斜体。