如何在正常字体和粗体之间使用不同的字体？

Question

我正在尝试将字体“Open Sans”应用于我的网站。我想在未加粗的文本中使用“Open Sans Regular”字体，在加粗的文本中使用“Open Sans Bold”字体，在斜体文本中使用“Open Sans Italic”字体，最后，在加粗且斜体的文本中使用“Open Sans Bold Italic”字体。我不想设置类别，而是希望它们适用于整个网站。

以下是我尝试过的代码，但它只将“Open Sans Italic”和“Open Sans Bold Italic”应用于所有内容，即使它不应该是斜体的时候：

@font-face {
    font-family: 'opensans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibold-webfont.eot');
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibold-webfont.woff') format('woff'),
         url('opensans-semibold-webfont.ttf') format('truetype'),
         url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: bold;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-style: italic, oblique;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibolditalic-webfont.eot');
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibolditalic-webfont.woff') format('woff'),
         url('opensans-semibolditalic-webfont.ttf') format('truetype'),
         url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: bold;
    font-style: italic, oblique;
}
body {
font-family:'opensans';
font-size:78%;
}

这是一个问题的例子，注意所有字体都是斜体，而不应该是这样的：http://www.bbmthemes.com/themes/modular/

- BRAINBUZZ media

---

所有字体在所提到的地方都不是斜体。问题描述在其他方面也不完整（没有HTML等），发帖者自己的答案似乎表明问题已经解决，尽管答案中的逻辑有误（按规格顺序并不重要）。 - Jukka K. Korpela

Answer 1

好的，我想出了自己的问题。它必须有一个非常特定的顺序才能正常工作。您需要按照以下顺序定义它们：

普通 斜体 粗体 粗斜体

因此，CSS应该是这样的：

@font-face {
    font-family: 'opensans';
    src: url('opensans-regular-webfont.eot');
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-regular-webfont.woff') format('woff'),
         url('opensans-regular-webfont.ttf') format('truetype'),
         url('opensans-regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibold-webfont.eot');
    src: url('opensans-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibold-webfont.woff') format('woff'),
         url('opensans-semibold-webfont.ttf') format('truetype'),
         url('opensans-semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'opensans';
    src: url('opensans-semibolditalic-webfont.eot');
    src: url('opensans-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-semibolditalic-webfont.woff') format('woff'),
         url('opensans-semibolditalic-webfont.ttf') format('truetype'),
         url('opensans-semibolditalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: bold;
    font-style: italic;
}
body {
font-family:'opensans';
font-size:78%;
}

这篇文章帮助我理解了一些关于IT技术方面的问题。以下是链接：http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/。

- BRAINBUZZ media

---

我怀疑这与顺序关系不大，更多地与每个@font-face声明中包含font-weight和font-style有关。 - shennan

Answer 2

您有两种方法可以做到这一点，一种是创建各种字体条目（稍微有些沉重的负载和不必要），另一种是将字体类型应用于字体粗细或字体样式。

各种字体条目（将MyFontName的值更改为所需新字体类型的名称）：

@font-face {
    font-family: 'MyFontName';
    src: url('opensans-italic-webfont.eot');
    src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('opensans-italic-webfont.woff') format('woff'),
         url('opensans-italic-webfont.ttf') format('truetype'),
         url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
    font-style: italic, oblique;
}

最佳方式（应用您想要的CSS字体样式）：

    @font-face {
        font-family: 'opensans';
        src: url('opensans-italic-webfont.eot');
        src: url('opensans-italic-webfont.eot?#iefix') format('embedded-opentype'),
             url('opensans-italic-webfont.woff') format('woff'),
             url('opensans-italic-webfont.ttf') format('truetype'),
             url('opensans-italic-webfont.svg#open_sansitalic') format('svg');
        font-style: italic, oblique; /* FONT STYLE ARE HERE */
    }

p{font-family:opensans, sans-serif; font-style:italic;}

- gespinha

---

我想做的是让所有正文字体都是常规的，而不是斜体的。我只希望具有CSS属性“font-style:italic;”的文本自动使用Open Sans斜体字体，我希望所有非斜体的内容都使用Open Sans常规字体。所有p标签应该都是常规的。 - BRAINBUZZ media

你已经完成了，问题在于你给所有字体条目分配了相同的font-family值。font-family: 'opensans'; - 为每个字体条目只分配一个名称，这样你就可以在特定元素上匹配特定的字体。 - gespinha

我不想为每个元素都设置样式，关键是它应该自动工作。 - BRAINBUZZ media

Answer 3

你需要使用不同的标识符更改字体族名称。我可以看到你正在为所有类使用相同的名称。请查看以下内容-

普通

 @font-face {
    font-family: 'opensansNormal';
    // code goes on

粗体

 @font-face {
    font-family: 'opensansBold';
    // code goes on

- Nitesh