3

Web サイトにフォント「open sans」を適用しようとしています。太字でないテキストには「open sans regular」、太字のテキストには「open sans bold」フォント、イタリック テキストには「open sans italic」、最後に「open sans bold italic」フォントを使用したいと思います。太字で斜体のテキスト。クラスを設定したくはありませんが、Web サイト全体に適用するだけです。

ここに私が試したコードがありますが、「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 に答える
-1

別の識別子でフォントファミリ名を変更する必要があります。すべてのクラスに同じ名前を使用していることがわかります。以下を確認してください-

普通

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

大胆な

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