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