3

我正在尝试将字体“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/

4

3 回答 3

4

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

普通斜体 粗体 粗斜体

所以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/

于 2013-08-25T05:41:06.940 回答
0

您有两种方法可以做到这一点，通过创建各种字体条目（加载稍重且不必要）或通过在字体粗细或字体样式上应用字体类型。

各种字体条目（将 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;}
于 2013-08-25T03:44:23.940 回答
-1

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

普通的

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

大胆的

 @font-face {
    font-family: 'opensansBold';
    // code goes on
于 2013-08-25T04:28:34.247 回答