Typography
用於控制元素字型的通用類別。
| Class | Styles |
|---|---|
font-sans | font-family: var(--font-sans); /* ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' */ |
font-serif | font-family: var(--font-serif); /* ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif */ |
font-mono | font-family: var(--font-mono); /* ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace */ |
font-(family-name:<custom-property>) | font-family: var(<custom-property>); |
font-[<value>] | font-family: <value>; |
使用 font-sans 和 font-mono 等通用類別來設定元素的字型：
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-sans ...">The quick brown fox ...</p><p class="font-serif ...">The quick brown fox ...</p><p class="font-mono ...">The quick brown fox ...</p>使用 font-[<value>] 語法，根據完全自訂的值來設定 font family：
<p class="font-[Open_Sans] ..."> Lorem ipsum dolor sit amet...</p>對於 CSS 變數，你也可以使用 font-(family-name:<custom-property>) 語法：
<p class="font-(family-name:--my-font) ..."> Lorem ipsum dolor sit amet...</p>這只是 font-[family-name:var(<custom-property>)] 的簡寫形式，會自動為你加上 var() 函式。
在 font-family 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<p class="font-sans md:font-serif ..."> Lorem ipsum dolor sit amet...</p>在變體文件中了解更多關於使用變體的資訊。
使用 --font-* 主題變數來自訂專案中的 font family 通用類別：
@theme { --font-display: "Oswald", sans-serif; }現在可以在標記中使用 font-display 通用類別：
<div class="font-display"> <!-- ... --></div>您也可以為字型提供預設的 font-feature-settings 和 font-variation-settings 值：
@theme { --font-display: "Oswald", sans-serif; --font-display--font-feature-settings: "cv02", "cv03", "cv04", "cv11"; --font-display--font-variation-settings: "opsz" 32; }如有需要，請使用 @font-face at-rule 來載入自訂字型：
@font-face { font-family: Oswald; font-style: normal; font-weight: 200 700; font-display: swap; src: url("/fonts/Oswald.woff2") format("woff2");}如果您是從 Google Fonts 等服務載入字型，請確保將 @import 放在 CSS 檔案的最頂端：
@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");@import "tailwindcss";@theme { --font-roboto: "Roboto", sans-serif; }瀏覽器要求 @import 陳述式必須在任何其他規則之前，因此 URL 匯入需要放在像 @import "tailwindcss" 這樣會被內聯到編譯後 CSS 的匯入之前。
在主題文件中了解更多關於自訂主題的資訊。