文字
同時設定字型大小、行高與字距的文字樣式。
本頁目錄
類別
| 類別 | 宣告 |
|---|---|
text-<name> | font-size: var(--text-<name>);line-height: var(--text-<name>--line-height, normal);letter-spacing: var(--text-<name>--letter-spacing, normal); |
主要的 --text-<name> token 會建立 class；其 --line-height 與 --letter-spacing 配套 token 為選用，未提供時使用 normal。字型家族、字重與色彩仍由獨立 class 設定。
值
每列顯示一個 class 讀取的三個值。預設大小會參照對應的 font-size token，表格則解析參照以利閱讀。所有預設文字樣式都包含兩個配套 token。
| 類別 | 大小 | 行高 | 字距 |
|---|---|---|---|
text-3xs | .5rem8px | 1.5 | 0 |
text-2xs | .625rem10px | 1.5 | 0 |
text-xs | .75rem12px | 1.5 | 0 |
text-sm | .875rem14px | 1.5 | 0 |
text-md | 1rem16px | 1.6 | 0 |
text-lg | 1.125rem18px | 1.5 | 0 |
text-xl | 1.25rem20px | 1.4 | -.01em |
text-2xl | 1.5rem24px | 1.35 | -.015em |
text-3xl | 2rem32px | 1.25 | -.02em |
text-4xl | 2.25rem36px | 1.2 | -.025em |
text-5xl | 2.5rem40px | 1.15 | -.03em |
text-6xl | 3rem48px | 1.1 | -.035em |
text-7xl | 3.75rem60px | 1.05 | -.04em |
text-8xl | 4.5rem72px | 1.05 | -.04em |
text-9xl | 6rem96px | 1 | -.045em |
text-10xl | 8rem128px | 1 | -.05em |
比較全部文字樣式
text-3xstext-2xstext-xstext-smtext-mdtext-lgtext-xltext-2xltext-3xltext-4xltext-5xltext-6xltext-7xltext-8xltext-9xltext-10xl一個主要 token，三個宣告
--text-card 註冊 text-card。這個 class 一律輸出字型大小、行高與字距。如果沒有 --text-card--line-height 或 --text-card--letter-spacing，對應宣告就會使用 normal，不會保留繼承的值。
文字樣式一律設定三個屬性
這裡只定義主要的 --text-card token。兩個配套宣告仍會存在並使用 normal，取代任何繼承的行高或字距。
文字說明
- 自訂主題將 --text-card 定義為 1.5rem，未定義任何配套 token。
- text-card 會輸出 font-size: var(--text-card)、line-height: var(--text-card--line-height, normal) 與 letter-spacing: var(--text-card--letter-spacing, normal)。
- 三條實線分支都代表會輸出的宣告。缺少的配套值會使用 normal 備援值，而不是繼承其他行高或字距。
- 單獨的配套 token 不會註冊 text-card。字型家族、字重與色彩都不屬於這個組合樣式。
只有配套 token 不會註冊文字樣式。即使只想自訂行高或字距，也必須加入主要的大小 token。
配套 token 是這個組合樣式使用的值，不是另一個 class 名稱。若要獨立調整，請使用 font-<size>、leading-<name> 或 tracking-<name>。條件相同時，這些單一屬性 utilities 會排在文字組合樣式之後，可覆寫對應的宣告；class 屬性中的順序不會決定結果。
這個組合樣式不會載入字型、選擇字型家族或字重、加入外距，或決定段落寬度。如何選擇並組合文字樣式建立層級，請見文字排版指南。
用法
為段落套用一組文字樣式，字型家族、字重與色彩仍可獨立設定。
A paragraph keeps its size, line height and letter spacing together. Its container can grow when the same text wraps onto another line.
<p class="… text-lg">A paragraph keeps its size,…</p>產生的 CSS
@layer theme { :root, :host { --font-size-lg: 1.125rem; --text-lg: var(--font-size-lg); --text-lg--line-height: 1.5; --text-lg--letter-spacing: 0 }}@layer utilities { .text-lg { font-size: var(--text-lg); line-height: var(--text-lg--line-height, normal); letter-spacing: var(--text-lg--letter-spacing, normal) }}自訂
加入文字樣式及其配套 token：--text-display 會建立 text-display。
@theme { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em;}產生的 CSS
@layer theme { :root, :host { --text-display: 3.5rem; --text-display--line-height: 1.1; --text-display--letter-spacing: -.03em }}@layer utilities { .text-display { font-size: var(--text-display); line-height: var(--text-display--line-height, normal); letter-spacing: var(--text-display--letter-spacing, normal) }}