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}的内容来声明paragraf类的字体。或类似h1, h2, h3, h4, h5, #headline a { color:#FF9900; }

的内容

Answer 2

这可能不是你正在寻找的技术答案，但为什么你需要使用三个权重（reg，half和bold，暂时不使用斜体）？

您可能会发现这些权重之间的对比不足以保证在一页内使用所有三个权重。您希望使用不同的字体权重在布局中创建不同级别的层次结构;两个重量，结合尺寸，大写和颜色的变化应该是足够的。

具有多种重量的字体可能包括以下字体：细线;瘦;光;定期;介质; Semibold;胆大;黑色;重（每个都有斜体版本）。该频谱的极端不应该用于设置长文本块，而只能用于大型显示尺寸或顶级标题。然后，您可以在主体文本的Light和Bold位置之间选择两个权重，在大多数情况下，选择至少两个位置的权重 - Light和Medium，或Regular和Bold - 以获得足够的对比度。太多的对比会破坏沉浸式阅读;例如，不要将Light与Bold配对。

如果您需要额外的中间重量用于特殊目的（例如，您可能在深色背景下设置白色文本，因此半粗体会很好）然后您可以为偶尔使用创建单独的类，同时将font-family声明中的四个常规权重和斜体样式链接为正常。

Answer 3

我可能错了，但我似乎记得读到为了与IE8一起工作，你必须在任何地方调用字体名称（这是你不想做的）。因此，在每个font-face声明中，您必须声明“font-style：normal”以及for。这非常令人讨厌，好像字体不能用于任何原因你得到“普通”样式系统字体，即使是粗体和斜体。对不起，我不记得我在哪里读到了！

定义CSS @ Font-Face粗体斜体

3 个答案: