字体排印
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-(<自定义属性>) | font-weight: var(<自定义属性>); |
font-[<值>] | font-weight: <值>; |
示例
基本示例
使用 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.
<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-[<值>] 语法 来设置字体粗细基于完全自定义的值
<p class="font-[1000] ..."> <!-- ... --></p>对于 CSS 变量，您也可以使用 font-(<自定义属性>) 语法
<p class="font-(--my-font-weight) ..."> <!-- ... --></p>这只是 font-[var(<自定义属性>)] 的简写形式，它会自动为您添加 var() 函数。
响应式设计
前缀使用 font-weight 实用工具 带有诸如 md: 的断点变体，以便仅在中等 屏幕尺寸及以上应用该实用工具
<p class="font-normal md:font-bold ..."> <!-- ... --></p>了解有关在变体文档中使用变体的更多信息。
自定义主题
使用 --font-* 主题变量来自定义您的项目中的字体粗细 实用工具
@theme { --font-extrablack: 1000; }现在， font-extrablack 实用工具可以在您的标记中使用
<div class="font-extrablack"> <!-- ... --></div>了解有关自定义主题的更多信息，请参阅 主题文档.
