排版
font-weight
用于控制元素字体粗细的工具。
| 类 | 样式 |
|---|---|
font-thin | font-weight: 100; |
font-extralight | font-weight: 200; |
font-light | font-weight: 300; |
font-normal | font-weight: 400; |
font-medium | font-weight: 500; |
font-semibold | font-weight: 600; |
font-bold | font-weight: 700; |
font-extrabold | font-weight: 800; |
font-black | font-weight: 900; |
font-(<custom-property>) | font-weight: var(<custom-property>); |
font-[<value>] | font-weight: <value>; |
示例(Examples)
基本示例(Basic example)
使用诸如 font-thin 和 font-bold 的工具来设置元素的字体粗细：
🌐 Use utilities like font-thin and font-bold to set the font weight of an element:
font-light
The quick brown fox jumps over the lazy dog.
font-normal
The quick brown fox jumps over the lazy dog.
font-medium
The quick brown fox jumps over the lazy dog.
font-semibold
The quick brown fox jumps over the lazy dog.
font-bold
The quick brown fox jumps over the lazy dog.
<p class="font-light ...">The quick brown fox ...</p><p class="font-normal ...">The quick brown fox ...</p><p class="font-medium ...">The quick brown fox ...</p><p class="font-semibold ...">The quick brown fox ...</p><p class="font-bold ...">The quick brown fox ...</p>使用自定义值(Using a custom value)
使用 font-[<value>] 语法 根据完全自定义的值设置 font weight：
<p class="font-[1000] ..."> Lorem ipsum dolor sit amet...</p>对于 CSS 变量，还可以使用 font-(weight:<custom-property>) 语法：
<p class="font-(weight:--my-font-weight) ..."> Lorem ipsum dolor sit amet...</p>这只是简写，用于 font-[weight:var(<custom-property>)] 它会自动为你添加 var() 函数。
响应式设计(Responsive design)
在 font-weight 工具前面使用断点变体如 md: 仅在 medium 屏幕尺寸及以上时应用工具：
<p class="font-normal md:font-bold ..."> Lorem ipsum dolor sit amet...</p>请参阅 变体文档 详细了解如何使用变体。
自定义主题(Customizing your theme)
使用 --font-weight-* 主题变量来自定义项目中的 font weight 工具：
@theme { --font-weight-extrablack: 1000; }现在 font-extrablack 工具可用于你的标记：
<div class="font-extrablack"> <!-- ... --></div>在此详细了解如何自定义主题： 主题文档。