@font-face を使用して複数のフォントのバリエーションを埋め込む方法

@font-face を使用して複数のフォント バリエーションを埋め込む方法

@font-face を使用してカスタム フォントを埋め込む場合に役立つことがあります太字、斜体、両方の組み合わせなど、複数のバリエーションをサポートします。同じフォントに複数のフォント ファイルを埋め込む方法の詳細な説明は次のとおりです。

バリエーションごとに @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;
}

HTML 要素へのフォント バリエーションの割り当て

@ を 1 回だけfont-face ルールが定義されている場合は、font-weight プロパティと font-style プロパティを使用して、HTML 要素にさまざまなバリエーションを割り当てることができます。例:

strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

これにより、DejaVu Sans フォントの太字バリエーションがすべての強力な要素に適用されます。

注:

• ブラウザは、バリエーション間の関係を自動的に理解できないため、バリエーションごとに個別の @font-face ルールを作成することが重要です。
• 「format()」引数はすべてのブラウザでサポートされているわけではないため、省略することをお勧めします。
• CSS2 とは異なり、CSS3 では単一のフォント スタイル値のみが許可されます。カンマ区切りリストをサポートしました。

以上が@font-face を使用して複数のフォントのバリエーションを埋め込む方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。