文字與排版
字型大小font-size
Setting the font size of elements.
Overview
| Class | Declarations |
|---|---|
font:3xs | font-size: var(--font-size-3xs);
|
font:2xs | font-size: var(--font-size-2xs);
|
font:xs | font-size: var(--font-size-xs);
|
font:sm | font-size: var(--font-size-sm);
|
font:md | font-size: var(--font-size-md);
|
font:lg | font-size: var(--font-size-lg);
|
font:xl | font-size: var(--font-size-xl);
|
font:2xl | font-size: var(--font-size-2xl);
|
font:3xl | font-size: var(--font-size-3xl);
|
font:4xl | font-size: var(--font-size-4xl);
|
font:5xl | font-size: var(--font-size-5xl);
|
font:6xl | font-size: var(--font-size-6xl);
|
font:7xl | font-size: var(--font-size-7xl);
|
font:8xl | font-size: var(--font-size-8xl);
|
font:9xl | font-size: var(--font-size-9xl);
|
font:10xl | font-size: var(--font-size-10xl);
|
font-size:<size> | font-size: <size>;
|
Examples
Basic usage
Use font size tokens like font:xs, font:sm, and font:md to set the font size of an element.
font:xs
Sphinx of black quartz, judge my vow.
font:sm
Sphinx of black quartz, judge my vow.
font:md
Sphinx of black quartz, judge my vow.
font:lg
Sphinx of black quartz, judge my vow.
font:xl
Sphinx of black quartz, judge my vow.
font:2xl
Sphinx of black quartz, judge my vow.
<div class="font:xs">Sphinx of black quartz, judge my vow.</div><div class="font:sm">Sphinx of black quartz, judge my vow.</div><div class="font:md">Sphinx of black quartz, judge my vow.</div><div class="font:lg">Sphinx of black quartz, judge my vow.</div><div class="font:xl">Sphinx of black quartz, judge my vow.</div><div class="font:2xl">Sphinx of black quartz, judge my vow.</div>Use font:* size tokens for project typography steps such as body copy, labels, and headings. The token names come from the font-size theme token scale.
<p class="font:sm">Small supporting text</p><h2 class="font:2xl">Section title</h2>Generated CSS
@layer theme { :root { --font-size-sm: .875rem; --font-size-2xl: 1.5rem }}@layer utilities { .font\:2xl { font-size: var(--font-size-2xl) } .font\:sm { font-size: var(--font-size-sm) }}With line height
Set the line height, use the leading:<size> syntax along with the font size.
<div class="font:md leading:1.2">Sphinx of black quartz, judge my vow.</div>You can also use the text:<size> syntax to set the line height and font size together.
Use an explicit font size
Use font-size:* when a one-off value should not become a named token.
<h1 class="font-size:clamp(1.25rem,2vw,2rem)"> Fluid title</h1>Prefer named tokens for repeated typography. Use explicit CSS values for local measured cases, demos, or fluid formulas.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font:sm font:md@sm font:lg@lg font:sm@print">...</div>