2

我正在做一个项目，我正在使用六种字体的权重/样式。这些包括：常规、斜体、半粗体、半粗斜体、粗体和粗斜体。我有@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;
    }

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

4

3 回答 3

1

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

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

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

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

于 2012-05-16T09:20:20.093 回答
1

您可以使用类似这样的方法来声明带有 paragraf 类的字体：

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

或类似的东西：

h1, h2, h3, h4, h5, #headline a {color: #FF9900}
于 2012-05-15T21:22:25.860 回答
0

我可能是错的，但我似乎记得读过，要让它与 IE8 一起工作，你必须在任何地方调用字体名称（这是你不想做的）。因此，在每个字体声明中，您必须声明“font-style:normal”以及 . 这非常烦人，好像无论出于何种原因，您都获得了“正常”样式的系统字体，即使是粗体和斜体字体也不起作用。对不起，我不记得我在哪里读到了！

于 2013-08-02T15:52:37.193 回答