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

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

@font-face CSS ルールにより、Web 開発者はカスタム フォントを Web 開発者に埋め込むことができます。デザイン。ただし、太字、斜体、太字斜体など、同じフォントの複数のバリエーションを扱う場合は困難になる可能性があります。この記事では、@font-face ルールを使用してこれらのバリエーションを組み込む方法について説明します。

@font-face ルールでは、src プロパティは通常、単一のフォント ファイルを参照します。ただし、複数の @font-face ルールを作成することで、開発者は同じフォントのバリアントをそれぞれのファイル名で定義できます。

たとえば、太字、斜体、太字に個別のファイルを持つ DejaVu Sans フォント ファミリを考えてみましょう。イタリック。次の CSS コードは、複数の @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;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}

バリアントごとに個別の @font-face ルールを作成することで、ブラウザーはさまざまなフォント スタイルの利用可能性について通知されます。同じフォント ファミリ内で。その後、CSS 宣言で指定された font-weight と font-style の値に基づいて、適切なフォント ファイルをロードできます。

一部のブラウザでは、次の format("ttf") 引数が認識されない可能性があることに注意してください。 src プロパティ。互換性の問題が発生した場合は、このパラメータを省略することをお勧めします。

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