Typography
字重
用于控制元素字体粗细的功能类。
| Class | Styles |
|---|---|
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 这样的功能类来设置元素的字重：
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>使用自定义值
Use the font-[<value>] syntax to set the 字重 based on a completely custom value:
<p class="font-[1000] ..."> <!-- ... --></p>For CSS variables, you can also use the font-(<custom-property>) syntax:
<p class="font-(--my-font-weight) ..."> <!-- ... --></p>This is just a shorthand for font-[var(<custom-property>)] that adds the var() function for you automatically.
响应式设计
Prefix a font-weight utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:
<p class="font-normal md:font-bold ..."> <!-- ... --></p>Learn more about using variants in the variants documentation.
自定义主题
Use the --font-* theme variables to customize the font weight utilities in your project:
@theme { --font-extrablack: 1000; }Now the font-extrablack utility can be used in your markup:
<div class="font-extrablack"> <!-- ... --></div>Learn more about customizing your theme in the theme documentation.
