507

@ font-face CSSルールのMDCページを見ていますが、1つもわかりません。太字、斜体、太字+斜体の別々のファイルがあります。@font-face3つのファイルすべてを1つのルールに埋め込むにはどうすればよいですか？たとえば、私が持っている場合：

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

ブラウザは太字に使用するフォントを認識しないため（そのファイルはDejaVuSansBold.ttfであるため）、デフォルトでおそらく不要なフォントになります。特定のフォントのさまざまなバリエーションをすべてブラウザに伝えるにはどうすればよいですか？

4

8 に答える 8

74

CSS3 の時点で仕様が変更され、単一のfont-style. コンマ区切りのリスト (CSS2 による) はnormal、以前の (デフォルトの) エントリを上書きするかのように扱われます。これにより、この方法で定義されたフォントが恒久的に斜体で表示されます。

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

ほとんどの場合、イタリック体で十分であり、どちらを使用するかを慎重に定義し、それに固執すれば、斜めの規則は必要ありません。

于 2015-02-17T21:41:45.740 に答える
14

Google フォントを使用している場合は、次のことをお勧めします。

ローカルホストまたはサーバーからフォントを実行する場合は、ファイルをダウンロードする必要があります。

ダウンロード リンクで ttf パッケージをダウンロードする代わりに、提供されているライブ リンクを使用します。たとえば、次のようになります。

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

URL をブラウザーに貼り付けると、最初の回答と同様の font-face 宣言が表示されます。

提供された URL を開き、ファイルをダウンロードして名前を変更します。

CSS 内の woff ファイルへの相対パスを使用して、更新された font-face 宣言を貼り付ければ、完了です。

于 2014-03-02T17:51:23.580 に答える