Tailwind CSS - 字体粗细

Tailwind CSS 中的 font-weight 字体粗细用于通过预定义类应用不同的粗细值来调整文本的粗细和粗细。

Tailwind CSS font-weight 字体粗细类

以下是 Tailwind CSS 类列表，这些类指定不同的字体粗细来控制文本的粗细和粗细。

Tailwind CSS 字体粗细类别的功能

• font-thin:对文本应用粗细 100，使其非常细。
• font-extralight:对文本应用粗细 200，使其非常细。
• font-light:对文本应用粗细 300，使其更细。
• font-normal:对文本应用粗细 400，保持标准粗细。
• font-medium:对文本应用粗细 500，使其略加粗体。
• font-semibold:对文本，并添加略微加粗的字重。
• font-bold: 将字重设置为 700，使其更加明显加粗。
• font-extrabold: 将字重设置为 800，使其非常加粗。
• font-black: 将字重设置为 900，使其尽可能加粗。

Tailwind CSS 字体字重类别示例

以下是 Tailwind CSS 字体字重类别的示例，您可以轻松调整文本的粗细和粗体程度。

使用 Tailwind CSS 设置文本字重样式

此示例展示了如何使用 Tailwind CSS 字体字重类别调整文本的外观，包括从细体到粗体等多种样式。以及粗细，让您可以控制文本的粗细。

<!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>