2

私は、使用しているフォントの 6 つのウェイト/スタイルを使用するプロジェクトに取り組んでいます。これらには、通常、斜体、半太字、半太字斜体、太字、太字斜体が含まれます。私は@font-faceタグを（理論的には）表示する方法でセットアップしました。しかし実際には、太字は常に斜体になっています。これらの太字と斜体の重みを宣言して、適切に機能させる方法はありますか? あちこちで異なるフォントファミリ名を呼びたくありません。理想的には、適切な太さとスタイルを宣言して、適切なバージョンのフォントを取得できるようにする必要があります。

@font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bold-webfont.eot');
    src: url('agaramondpro-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bold-webfont.woff') format('woff'),
         url('agaramondpro-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bolditalic-webfont.eot');
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bolditalic-webfont.woff') format('woff'),
         url('agaramondpro-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic, oblique;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-italic-webfont.eot');
    src: url('agaramondpro-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-italic-webfont.woff') format('woff'),
         url('agaramondpro-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic, oblique;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-regular-webfont.eot');
    src: url('agaramondpro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-regular-webfont.woff') format('woff'),
         url('agaramondpro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibold-webfont.eot');
    src: url('agaramondpro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibold-webfont.woff') format('woff'),
         url('agaramondpro-semibold-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    }

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibolditalic-webfont.eot');
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibolditalic-webfont.woff') format('woff'),
         url('agaramondpro-semibolditalic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic, oblique;
    }

それを機能させるためのアイデアはありますか？

4

3 に答える 3

1

これはおそらくあなたが探している正確な技術的な答えではありませんが、なぜ 3 つのウェイト (reg、semi、bold、今のところイタリック体を脇に置いておく) を使用する必要があるのでしょうか?

これらの重みのコントラストが十分に大きくなく、1 ページ内で 3 つすべてを使用することを保証できない場合があります。異なる太さのフォントを使用して、レイアウト内に明確なレベルの階層を作成したい。サイズ、大文字、色の変更と組み合わせて、2 つの重みで十分です。

幅広い太さの書体には、次のフォントが含まれる場合があります。薄い; 光; 通常; 中くらい; 半太字; 大胆な; 黒; 重い (それぞれの斜体バージョン)。そのスペクトルの極端な部分は、長いテキスト ブロックの設定には使用しないでください。大きな表示サイズまたはトップ レベルの見出しでのみ使用してください。次に、たとえば本文テキストのライトとボールドの位置の間で 2 つのウェイトを選択します。ほとんどの場合、十分なコントラストを得るために、ライトとミディアム、またはレギュラーとボールドの 2 つ以上離れたウェイトを選択します。コントラストが強すぎると、没入型の読書が妨げられます。たとえば、Light と Bold を組み合わせないでください。

特別な目的のために追加の中間ウェイトが必要な場合 (たとえば、暗い背景に対して白いテキストを設定する場合があるため、半太字が適しています)、その時々の使用のために別のクラスを作成することができます。 - font-family 宣言内の 4 つの従来の太さと斜体を通常どおりにリンクします。

于 2012-05-16T09:20:20.093 に答える
1

次のようなものを使用して、paragraf クラスでフォントを宣言できます。

p.normal {font-style:normal}
p.italic {font-style:italic}
p.oblique {font-style:oblique}

または次のようなもの：

h1, h2, h3, h4, h5, #headline a {color: #FF9900}
于 2012-05-15T21:22:25.860 に答える
0

私は間違っているかもしれませんが、これを IE8 で動作させるには、どこでもフォント名を呼び出さなければならないことを読んだことを覚えているようです (これはやりたくないことです)。したがって、各 font-face 宣言では、「font-style:normal」と . これは、太字や斜体でも「通常の」スタイルのシステム フォントを取得する何らかの理由でフォントが機能しないかのように、非常に面倒です。どこで読んだか思い出せなくてごめんなさい！

于 2013-08-02T15:52:37.193 に答える