font-weight

例

基本的な例

要素のフォントの太さを設定するには、font-thin や font-bold などのユーティリティを使用します。

<p class="font-light ...">The quick brown fox ...</p>
<p class="font-normal ...">The quick brown fox ...</p>
<p class="font-medium ...">The quick brown fox ...</p>
<p class="font-semibold ...">The quick brown fox ...</p>
<p class="font-bold ...">The quick brown fox ...</p>

カスタム値の使用

以下を使用してください font-[<value>] 構文 を設定するにはフォントの太さ完全にカスタムの値に基づいて

<p class="font-[1000] ...">
  Lorem ipsum dolor sit amet...
</p>

CSS 変数の場合は、以下も使用できます。 font-(<custom-property>) 構文

<p class="font-(--my-font-weight) ...">
  Lorem ipsum dolor sit amet...
</p>

これは以下の省略形です。 font-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスa font-weight ユーティリティ md: のようなブレークポイントバリアントを付けて、ユーティリティを適用する範囲をmedium 以上の画面サイズに限定します。

<p class="font-normal md:font-bold ...">
  Lorem ipsum dolor sit amet...
</p>

バリアントの使用方法の詳細については、バリアントに関するドキュメントをご覧ください。

テーマのカスタマイズ

--font-weight-* テーマ変数を使用して、フォントの太さ プロジェクトのユーティリティをカスタマイズします。

@theme {
  --font-weight-extrablack: 1000; 
}

これで font-extrablack ユーティリティをマークアップで使用できます。

<div class="font-extrablack">
  <!-- ... -->
</div>

テーマのカスタマイズの詳細については、 テーマに関するドキュメント.