[解決済み] 同じフォントに対して複数のフォントファイルを追加する方法を教えてください。

質問

を見ています。 MDCの@font-face CSSルールのページです。 が、一つも得られない。のファイルを別々に持っています。 太字 , イタリック と 太字＋斜体 . 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だから）、おそらく私が望まないものがデフォルトになるでしょう。どうすればブラウザに、あるフォントの異なるバリエーションをすべて伝えることができるのでしょうか？

解決方法は？

解決策としては、複数の @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つのfont-styleしか許さない)。