web-dev-qa-db-ja.com

同じフォントに複数のフォントファイルを追加する方法

私は MDCページで@ font-face CSSルール を探していますが、1つのことがわかりません。 ボールド、イタリック、ボールド+イタリックに別々のファイルがあります。 3つのファイルすべてを1つの@font-faceルールに埋め込むにはどうすればよいですか。たとえば、私が持っているなら：

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

ブラウザはどのフォントが太字に使われるのかわからないでしょう（そのファイルはDejaVuSansBold.ttfであるからです）、それで私はおそらく望まない何かにデフォルトになるでしょう。特定のフォントに対して持っているさまざまな種類をすべてブラウザに知らせるにはどうすればよいですか。

cssfontscss3font-face
401
Felix

解決策は、複数の@font-face規則を追加することです、例えば：

@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, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

ちなみに、Google Chromeはformat("ttf")引数を認識していないように思われるので、それをスキップすることをお勧めします。

（この答えは CSS 2 の仕様には正しかった。 CSS3 はコンマ区切りのリストではなく、1つのフォントスタイルの場合。

675
Felix

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;
}

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

51
Josiah

あなたがGoogleフォントを使っているなら、私は以下を提案するでしょう。

あなたのフォントをあなたのlocalhostかサーバから走らせたいのなら、あなたはファイルをダウンロードする必要があります。

ダウンロードリンクのttfパッケージをダウンロードする代わりに、それらが提供するライブリンクを使用してください。

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

ブラウザにURLを貼り付けると、最初の回答と同じフォントフェース宣言が表示されます。

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

CSSのwoffファイルへの相対パスを使用して、更新されたフォントフェイス宣言を貼り付けるだけで完了です。

12
Dieter Gribnitz

フォントのバリエーションを正しく機能させるには、CSSの@ font-faceの順序を逆にする必要がありました。

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}
11
Cedric Simon

今日、2017-12-17。 Font-property-orderの必要性についての説明は spec にはありません。そして、私はchromeでテストしますが、どんな順番でもうまくいきます。

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}
9
xlaoyu.Lee
/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}
1
Jerry T