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-[<值>] 語法 來設定字體粗細基於完全自定義的值

<p class="font-[1000] ...">  <!-- ... --></p>

對於 CSS 變數，您也可以使用 font-(<自定義屬性>) 語法

<p class="font-(--my-font-weight) ...">  <!-- ... --></p>

這只是 font-[var(<自定義屬性>)] 的簡寫，它會自動為您新增 var() 函數。

響應式設計

字首將 font-weight 實用程式 加上像 md: 這樣的斷點變體，以僅在中等 螢幕尺寸及以上應用該實用程式

<p class="font-normal md:font-bold ...">  <!-- ... --></p>

在變體文件中了解更多關於使用變體的信息。

自定義您的主題

使用 --font-* 主題變數來客製化您專案中的字體粗細 實用程式

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

現在， font-extrablack 實用程式可以在您的標記中使用

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

在主題文件中了解更多關於自定義您的主題的信息。 在主題文件中了解更多關於自定義您的主題的信息。.