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>; |
示例
基础示例
使用 font-thin 和 font-bold 等工具类来设置元素的字重：
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.
html
<!-- [!code classes:font-light,font-normal,font-medium,font-semibold,font-bold] -->
<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>使用自定义值
使用 font-[<value>] 等工具类，可根据完全自定义的值设置字重：
html
<p class="font-[1000] ...">
Lorem ipsum dolor sit amet...
</p>对于 CSS 变量，也可以使用 font-(weight:<custom-property>) 语法：
html
<p class="font-(weight:--my-font-weight) ...">
Lorem ipsum dolor sit amet...
</p>这只是 font-[weight:var(<custom-property>)] 的简写，会自动为你加上 var() 函数。
响应式设计
使用 md: 等断点变体前缀，即可让 font-weight 工具类仅在中等及以上屏幕尺寸下生效：
html
<p class="font-normal md:font-bold ...">
Lorem ipsum dolor sit amet...
</p>在变体文档中了解更多关于使用变体的信息。
自定义主题
使用 --font-weight-* 主题变量来自定义项目中的字重工具类：
css
@theme {
--font-weight-extrablack: 1000;
}现在可以在标记中使用 font-extrablack 工具类：
html
<div class="font-extrablack">
<!-- ... -->
</div>在主题文档中了解更多关于自定义主题的信息。