Typography
用於控制元素字型粗細的通用類別。
| Class | Styles |
|---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
font-(<custom-property>) | font-weight: var(<custom-property>); |
font-[<value>] | font-weight: <value>; |
使用 font-thin 和 font-bold 等通用類別來設定元素的字型粗細：
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<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>] 語法，根據完全自訂的值來設定 font weight：
<p class="font-[1000] ..."> Lorem ipsum dolor sit amet...</p>對於 CSS 變數，你也可以使用 font-(weight:<custom-property>) 語法：
<p class="font-(weight:--my-font-weight) ..."> Lorem ipsum dolor sit amet...</p>這只是 font-[weight:var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 font-weight 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="font-normal md:font-bold ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。
使用 --font-weight-* 主題變數來自訂專案中的 font weight 通用類別：
@theme { --font-weight-extrablack: 1000; }現在可以在標記中使用 font-extrablack 通用類別：
<div class="font-extrablack"> <!-- ... --></div>在主題文件中了解更多關於自訂主題的資訊。