単一の @font-face ルールに複数のフォント バリアント (太字、斜体) を埋め込むにはどうすればよいですか?

単一の @font-face ルール内の複数のフォント バリアント

CSS では、@font-face ルールを使用してカスタム フォントを Web ページに埋め込むことができます。ただし、複数のフォント バリアント (太字、斜体、太字斜体など) を使用する場合、それらを 1 つのルールで指定する方法が不明瞭になることがあります。

同じフォントに複数のフォント ファイルを埋め込むには、次のようにします。複数の @font-face ルールを使用します。たとえば、DejaVu Sans の太字、斜体、および太字斜体の個別のファイルがある場合:

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

上記の例では、各 @font-face ルールで異なるフォント バリアントが指定されています。 Web ブラウザがフォント スタイル宣言 (例: font-weight: 太字) を検出すると、対応するフォント ファイルがロードされ、適切なスタイルが適用されます。

Chrome は形式("ttf) を認識しないことに注意してください。上記の例では") 引数があるため、省略できます。さらに、CSS3 では、例に示すようにカンマ区切りのリストではなく、@font-face ルールごとに 1 つのフォント スタイル宣言のみが許可されます。

以上が単一の @font-face ルールに複数のフォント バリアント (太字、斜体) を埋め込むにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。