文字與排版
字型粗細font-weight
Setting the weight of the font.
Overview
| Class | Declarations |
|---|---|
font-weight:normal | font-weight: normal;
|
font-bolder | font-weight: bolder;
|
font:thin | font-weight: var(--font-weight-thin);
|
font:extralight | font-weight: var(--font-weight-extralight);
|
font:light | font-weight: var(--font-weight-light);
|
font:regular | font-weight: var(--font-weight-regular);
|
font:medium | font-weight: var(--font-weight-medium);
|
font:semibold | font-weight: var(--font-weight-semibold);
|
font:bold | font-weight: var(--font-weight-bold);
|
font:extrabold | font-weight: var(--font-weight-extrabold);
|
font:heavy | font-weight: var(--font-weight-heavy);
|
font-weight:<weight> | font-weight: <weight>;
|
Examples
Basic usage
Use tokens like font:thin, font:regular, and font:bold to set the font weight of an element.
font:thin
Elegant forms shape visual harmony.
font:extralight
Elegant forms shape visual harmony.
font:line
Elegant forms shape visual harmony.
font:regular
Elegant forms shape visual harmony.
font:medium
Elegant forms shape visual harmony.
font:semibold
Elegant forms shape visual harmony.
font:bold
Elegant forms shape visual harmony.
font:extrabold
Elegant forms shape visual harmony.
font:heavy
Elegant forms shape visual harmony.
<div class="font:thin">Elegant forms shape visual harmony.</div><div class="font:extralight">Elegant forms shape visual harmony.</div><div class="font:regular">Elegant forms shape visual harmony.</div><div class="font:medium">Elegant forms shape visual harmony.</div><div class="font:semibold">Elegant forms shape visual harmony.</div><div class="font:bold">Elegant forms shape visual harmony.</div><div class="font:extrabold">Elegant forms shape visual harmony.</div><div class="font:heavy">Elegant forms shape visual harmony.</div>Use font:* weight shortcuts for common type emphasis.
<p class="font:regular">Regular body text</p><strong class="font:semibold">Important label</strong><h1 class="font:heavy">Display heading</h1>Generated CSS
@layer theme { :root { --font-weight-regular: 400; --font-weight-semibold: 600; --font-weight-heavy: 900 }}@layer utilities { .font\:heavy { font-weight: var(--font-weight-heavy) } .font\:regular { font-weight: var(--font-weight-regular) } .font\:semibold { font-weight: var(--font-weight-semibold) }}Use explicit weights
Use font-weight:* for numeric or keyword weights that do not have a shortcut.
<span class="font-weight:600">Custom weight</span>Weight changes only work when the active font family provides that weight or the browser can synthesize it.
Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="font:regular font:semibold:hover font:bold@sm font:regular@print">...</div>