Question

我正在尝试将字体'open sans'应用到我的网站。我想使用'open sans regular'用于非粗体的文本和'open sans bold'字体用于粗体文本，'open sans italic'用于斜体文本，最后'open sans bold italic'for粗体和斜体的文字。我不想设置课程，而只是让它们适用于整个网站。

这是我尝试过的代码，但它只是应用'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/

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%;
}

这篇文章帮助我弄明白了http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/

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;}

Answer 3

您需要使用不同的标识符更改字体系列名称。我可以看到你为所有课使用相同的名字。检查下面 -

正常

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

粗体

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

如何在正常体重下使用一个字体面，在身体上使用另一个字体？

3 个答案: