定义CSS @Font-Face粗体斜体

Question

我正在做一个项目，在这个项目中，我使用了六种字体的粗细/样式。其中包括:常规、斜体、半粗体、半粗斜体、粗体和粗体斜体。我设置了@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;
    }

有什么想法可以让它工作吗？

Answer 1

您可以使用类似于此p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique}的内容来声明带有something类的字体。或者像h1, h2, h3, h4, h5, #headline a { color:#FF9900; }这样的东西

Answer 2

这可能不是你想要的确切的技术答案，但是为什么你需要使用三种权重(reg，semi和粗体，暂时抛开斜体)？

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

具有较大粗细范围的字体可能包括以下字体:细线；瘦；轻；常规；中等；半粗体；粗体；黑色；重字体(每种字体都有斜体版本)。这种光谱的极端不应该用于设置长文本块，而只能用于大显示尺寸或顶级标题。然后，您可以在主体文本的Light和Bold位置之间选择两个权重，在大多数情况下，至少选择两个位置之间的权重- Light和Medium，或Regular和Bold -以获得足够的对比度。太强的对比度会破坏沉浸式阅读；例如，不要将Light和Bold配对。

如果您需要额外的中间粗细用于特殊目的(例如，您可能在深色背景上设置了白色文本，因此半粗体会更好)，那么您可以创建一个单独的类以供偶尔使用，同时正常地将字体系列声明中的四个常规粗细和斜体进行样式链接。

Answer 3

我可能错了，但我似乎记得我读过一篇文章，为了在IE8上工作，你必须在任何地方调用字体名称(这是你不想做的)。因此，在每个font-face声明中，您必须声明"font-style:normal“和for。这是非常恼人的，因为无论出于什么原因，字体都不能工作，即使是粗体和斜体也会得到“正常”样式的系统字体。很抱歉，我不记得我在哪里读到的！