文字排版
font-family
用於控制元素字體的實用程式。
| 類別 | 樣式 |
|---|---|
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:<自訂屬性>) | font-family: var(<自訂屬性>); |
font-[<值>] | font-family: <值>; |
範例
基本範例
使用類似 font-sans 和 font-mono 的實用程式來設定元素的字體
font-sans
The quick brown fox jumps over the lazy dog.
font-serif
The quick brown fox jumps over the lazy dog.
font-mono
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-[<值>] 語法 來設定字體基於完全自訂的值
<p class="font-[Open_Sans] ..."> <!-- ... --></p>對於 CSS 變數，您也可以使用 font-(<自訂屬性>) 語法
<p class="font-(--my-font) ..."> <!-- ... --></p>這只是 font-[var(<自訂屬性>)] 的簡寫，它會自動為您新增 var() 函式。
響應式設計
前綴將 font-family 實用程式 加上像 md: 這樣的斷點變體，以便僅在中等 螢幕尺寸及以上時套用此實用程式
<p class="font-sans md:font-serif ..."> <!-- ... --></p>在 變體文件中了解有關使用變體的更多資訊。
自訂您的主題
使用 --font-* 主題變數來自訂您專案中的字體 實用程式
@theme { --font-display: "Oswald", "sans-serif"; }現在，font-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");}