2

CSS3 font-face を使用する正しい方法を誰かが理解するのを手伝ってくれませんか。以下は、いくつかの font-face 宣言です。正しいのはどれで、その理由は何ですか?

/* START OF SAMPLE CODE # 1 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFont';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
h1 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: bold;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 1 */

=========

/* START OF SAMPLE CODE # 2 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFontBold';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}
h1 {
    font-family: 'WebFontBold', blah, blah, blah;
    font-weight: normal;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 2 */

=========

/* START OF SAMPLE CODE # 3 */
@font-face {
    font-family: 'WebFont';
    src: url('webfont.eot');
    src: url('webfont.eot?#iefix') format('embedded-opentype'),
         url('webfont.woff') format('woff'),
         url('webfont.ttf') format('truetype'),
         url('webfont.svg#WebFont') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'WebFontBold';
    src: url('webfont-bold.eot');
    src: url('webfont-bold.eot?#iefix') format('embedded-opentype'),
         url('webfont-bold.woff') format('woff'),
         url('webfont-bold.ttf') format('truetype'),
         url('webfont-bold.svg#WebFont-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}
h1 {
    font-family: 'WebFontBold', blah, blah, blah;
    font-weight: bold;
}
h2 {
    font-family: 'WebFont', blah, blah, blah;
    font-weight: normal;
}
/* END OF SAMPLE CODE # 3 */

これらのコード サンプルの違いは、"Bold" フォントの宣言方法と使用方法です。これらのうちどれが正しいか、またその理由を教えてください。

PS: 長い質問/サンプルで申し訳ありません。混乱を避けるために、できるだけ多くの情報を提供したかっただけです。

編集1：以下の回答の1つで@Jukkaが述べたように、論理的なアプローチは「コード＃1」を使用することですが、Safariをチェックしたところ、太字のフォントは他のブラウザーと比較してSafariで太字になりすぎています、しかし、「コード #2」を使用すると、すべてのブラウザが同じようにレンダリングされるため、異なる font-face 宣言を使用すると、舞台裏で何かが起こっているように見えます。ですから、現時点では、「コード #2」が進むべき道のように思えます。

4

1 に答える 1

1

boldキーワードを囲む引用符はnormalCSS 構文に従って許可されていないため、どのコードも正しくありません。それ以外の場合、コード 1 は論理原則に基づいています。これは、通常と太字の 2 つの書体が明らかに同じフォント ファミリーに属するものとして指定されているためです。他のコードは、各書体をフォント ファミリであるかのように宣言します。十分に注意して使用すると、このアプローチも機能します。

主な実際的な違いは、論理的アプローチ (コード 1) を使用すると、必要font-family: WebFont, Foobarに応じてすべての要素に対しても単純に を宣言でき、それらにfont-weight: bold設定されている要素には太字の書体が自動的に使用されることです (ブラウザーのデフォルトでは、 、h1または明示的な設定による)。これは、WebFont フォント ファミリが何らかの理由 (ダウンロード可能なフォントを拒否するブラウザー設定など) で使用されない場合、Foobar フォントの適切な書体 (通常または太字) が使用されることも意味します。

于 2013-09-25T07:32:45.110 に答える