在传统 CSS 中，我们通常使用 font-weight 属性来设置字体的粗细，取值一般是 100 到 900 的数字。而在 Tailwind CSS 中，我们可以使用更具语义化的单词类名来代替这些数字。
Tailwind CSS 定义字体粗细
在 Tailwind CSS 中，我们可以使用 “font-*” 相关类名来定义元素文本的字体粗细。
语法：
font-{粗细}说明：
其中，常用的字体粗细类名如下表所示：
| 类名 | 对应CSS值 | 说明 |
|---|---|---|
| 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; | 极粗体（黑体） |
示例 1：定义字体粗细
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<p class="font-light">
font-light (细体)
</p>
<p class="font-normal">
font-normal (正常)
</p>
<p class="font-bold">
font-bold (粗体)
</p>
<p class="font-black">
font-black (极粗)
</p>
</body>
</html>页面效果如下图所示。
Tailwind CSS 字体粗细 “任意值”
虽然 Tailwind CSS 提供了很多语义化类名，但如果小伙伴们习惯了传统 CSS 中直接使用数字的方式，或者必须严格按照设计稿指定的数值来实现，此时就得使用任意值的语法才行。
在 Tailwind CSS 中，我们可以使用中括号 “[]” 的方式来定义任意数值的字体粗细。
语法：
font-[数值]说明：
比如 font-[600]，表示将 font-weight 定义为 600。
提示: 关于任意值的语法，我们在后面 “Tailwind CSS 任意值” 一节中会详细介绍。
示例 2：字体粗细 “任意值”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
</head>
<body class="p-10">
<p class="font-[600] text-green-600">
绿叶网 - 为好教程，全力以赴
</p>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们使用了 font-[600] 来定义字体粗细。Tailwind CSS 编译时，会精准地将这段文字的 font-weight 设置为 600。这种方式能让我们完美对接传统的 CSS 数值规范。
常见问题
1. 为什么我给元素加了 font-black，但文字看起来并没有变得更粗呢？
这是一个非常经典的新手坑！字体能不能变粗，本质上取决于你当前使用的 “字体库” 里有没有包含这个粗细版本的设计。
比如，有些免费的中文字体只包含 400（正常）和 700（粗体）两个版本。但如果你强制设置 900（font-black）时，此时浏览器找不到对应的极粗字体文件，就只会用 700 来代替显示。
