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

@font-face を使用した複数のフォント バリアントの埋め込み

CSS では、@font-face ルールを使用してカスタム フォントをフォントに埋め込むことができます。ウェブページ。ただし、太字、斜体、またはその両方など、同じフォントの複数のバリエーションがある場合はどうなるでしょうか?ブラウザが正しいバリアントを読み込んで使用していることを確認するにはどうすればよいですか?

解決策は、複数の @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;
}

このコードにより、フォント ファミリを「DejaVu Sans」に設定し、太字や斜体のスタイルを適用すると、ブラウザーがフォントの適切なバリアントがロードされます。

format("ttf") 引数はオプションであり、必要ない場合があることに注意してください。すべてのブラウザ。また、CSS3 では、フォント スタイルを指定するための簡略化された構文が導入されました。複数の @font-face ルールを使用する代わりに、単一のルールで font-weight と font-style の値のカンマ区切りリストを使用できます:

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

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