Tailwind CSS - 字体粗细

在 Tailwind CSS 中，字体粗细 用于通过预定义的类应用不同的权重值来调整文本的粗细和粗体程度。

Tailwind CSS 字体粗细类

以下是指定不同字体粗细以控制文本粗细和粗体程度的 Tailwind 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;

Tailwind CSS 字体粗细类的功能

font-thin: 将权重“100”应用于文本，使其非常轻。
font-extralight: 将权重“200”应用于文本，使其极轻。
font-light: 将权重“300”应用于文本，使其更轻。
font-normal: 将权重“400”应用于文本，保持标准权重。
font-medium: 将权重“500”应用于文本，使其略微粗体。
font-semibold: 将权重“600”应用于文本，增加略微更重的权重。
font-bold: 将权重“700”应用于文本，使其明显粗体。
font-extrabold: 将权重“800”应用于文本，使其非常粗体。
font-black: 将权重“900”应用于文本，设置可能的最大权重。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

Tailwind CSS 字体粗细类示例

以下是 Tailwind CSS 字体粗细类的示例，它们允许您轻松调整文本的粗细和粗体程度。

使用 Tailwind CSS 进行文本粗细样式设置

此示例显示了如何使用 Tailwind CSS 字体粗细类来调整文本的外观，从细而轻的样式到粗而重的权重，允许您控制文本的粗细。

Open Compiler

<!DOCTYPE html>
<html lang="en">
<head> 
     <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="p-4">
    <h1 class="text-2xl font-bold mb-4">
    Tailwind CSS Font Weight 
    </h1>   
    <p class="font-thin mb-4">
        This text is styled with a thin font weight of 100.
    </p>  
    <p class="font-extralight mb-4">
        This text is styled with an extra-light font weight of 200.
    </p> 
    <p class="font-light mb-4">
        This text is styled with a light font weight of 300.
    </p>
    <p class="font-normal mb-4">
        This text is styled with a normal font weight of 400.
    </p>    
    <p class="font-medium mb-4">
        This text is styled with a medium font weight of 500.
    </p>
    <p class="font-semibold mb-4">
        This text is styled with a semi-bold font weight of 600.
    </p>
    <p class="font-bold mb-4">
        This text is styled with a bold font weight of 700.
    </p>
    <p class="font-extrabold mb-4">
        This text is styled with an extra-bold font weight of 800.
    </p>
    <p class="font-black">
        This text is styled with a black font weight of 900.
    </p>
</body>

</html>

打印页面