単一の @font-face クエリで複数のフォント ウェイトをインポートできますか?

単一 @font-face クエリによる複数のフォント ウェイトのインポート

CSS では、@font-face ルールを使用してカスタム フォントを Web ページにインポートします。ただし、複数のウェイトを持つフォントをインポートするには、複数のクエリが必要になる場合があります。この記事では、単一のクエリで複数のフォントのウェイトをインポートする可能性について検討します。

問題

8 つの異なる形状とサイズがある Klavika フォントについて考えてみましょう。

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

目標は、単一の @font-face クエリを使用してこれらのフォントを CSS にインポートし、クエリでウェイトを定義することです。

解決策

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

これを達成するには、@font-face の特別なフレーバーを使用できます。

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

このアプローチは、さまざまなスタイルと重みを関連付けます。同じフォントファミリーを使用した異なるフォントでの使用name.

使用法

これで、フォント ファミリを指定したり、既存の設定をオーバーライドしたりせずに、任意の要素の font-weight または font-style を指定できるようになります。

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

結論

この手法を使用すると、単一の @font-face クエリで複数のフォント ウェイトをインポートできます。 CSS、プロセスを簡素化し、コード効率を向上させます。

以上が単一の @font-face クエリで複数のフォント ウェイトをインポートできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。