2

CSS を使用して定義された 、 、 などのさまざまなfont-stylesを含む HTML ページがあります。たとえば、for 、forなど、それぞれに別々のフォントを使用したい。normalbolditalicsobliquefont-stylemyboldfontboldmyitalicsfontitalics@font-face

@font-face {
    font-family: "MyNormal";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyBold";
    font-style: normal;
    font-weight: normal;
    src: url("myboldfont.woff") format("woff");
}
@font-face {
    font-family: "MyItalics";
    font-style: normal;
    font-weight: normal;
    src: url("myitalicsfont.woff") format("woff");
}
@font-face {
    font-family: "MyOblique";
    font-style: normal;
    font-weight: normal;
    src: url("myobliquefont.woff") format("woff");
}

通常、斜体、太字、斜めのフォントをインポートしました。body次のようなスタイリングを定義しました。

body{
  font-family: MyNormal, MyBold, MyItalics, MyOblique;
}

font-styleボディ内のすべての のスタイルを定義するには、これで十分ですか? font-style: italicorを要素に割り当てfont-weight: boldた場合、斜体フォントまたは太字フォントが使用されますか? または、これを達成するにはどうすればよいので、font-weight: bold要素に使用する場合は使用するmyboldfont.woff必要があります。

4

2 に答える 2

4

これはうまくいくはずです：

@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: normal;
    src: url("mynormalfont.woff") format("woff");
}
@font-face {
    font-family: "MyFont";
    font-style: normal;
    font-weight: bold;
    src: url("myboldfont.woff") format("woff");
}

この：

...{
   font-family:"MyFont";
   font-weight:bold;
}...

次に、 には常に同じ名前を使用しfont-familyますが、異なるプロパティを変更します。

于 2013-03-28T05:36:08.243 に答える
2

質問に記載されている CSS が最も安全な方法です。IE8 では、1 つ以上のウェイト、または 4 つ以上のウェイトまたはスタイルがフォント ファミリ名にリンクされている場合に表示の問題が発生します。各フォント バリエーションに一意のフォント ファミリ名を使用すると、この問題を回避できます。

フォント バリエーションごとに一意の font-family 名が使用されている場合、@font-face 宣言、またはそのフォントを使用する HTML 要素の CSS 規則で、太さやスタイルを識別する必要はありません。

また、可能な限り幅広いブラウザ セットをサポートするには、埋め込みフォントに .woff、.ttf、および .eot を組み合わせて使用​​します。これは TypeKit で使用されるアプローチです。

@font-face {
    font-family: 'MyNormal';
    src: url('mynormalfont.eot');
    src: url('mynormalfont.eot?#iefix')
            format('embedded-opentype'),
         url('mynormalfont.woff') format('woff'),
         url('mynormalfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyBold';
    src: url('myboldfont.eot');
    src: url('myboldfont.eot?#iefix')
            format('embedded-opentype'),
         url('myboldfont.woff') format('woff'),
         url('myboldfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyItalics';
    src: url('myitalicsfont.eot');
    src: url('myitalicsfont.eot?#iefix')
            format('embedded-opentype'),
         url('myitalicsfont.woff') format('woff'),
         url('myitalicsfont.ttf') format('truetype');
}
@font-face {
    font-family: 'MyOblique';
    src: url('myobliquefont.eot');
    src: url('myobliquefont.eot?#iefix')
            format('embedded-opentype'),
         url('myobliquefont.woff') format('woff'),
         url('myobliquefont.ttf') format('truetype');
}

また、フォントバリアントは次のように使用されます。

p {
    font-family: MyNormal, sans-serif;   /* Still useful to add fallback fonts */
    font-size: 12px;
}
h2 {
    font-family: MyBold, sans-serif;
    font-size: 20px;
}

欠点は、フォント バリエーションの 1 つを使用するすべての CSS ルールで font-family 名を指定する必要があることです。しかし、それは現在、幅広いクロスブラウザーのサポートのために支払われなければならない代償と考えることができます.

于 2013-03-28T07:37:37.670 に答える