Tailwind CSS - 字体大小

Tailwind CSS font-size 字体大小是一系列预定义类，用于管理和调整网页上的文本大小。

Tailwind CSS font-size 字体大小类

以下是指定不同字体大小的 Tailwind CSS 类列表。

Tailwind CSS 字体大小类的功能

• text-xs: 将字体大小设置为 12 像素，行高为 16 像素。
• text-sm: 将字体大小设置为 14 像素，行高为 20 像素。
• text-base: 将字体大小设置为 16 像素，行高为 24 像素。
• text-lg: 将字体大小设置为 18 像素，行高为 28 像素。
• text-xl: 将字体大小设置为 20 像素，行高为 28 像素。
• text-2xl: 将字体大小设置为 24 像素，行高为 32 像素。
• text-3xl: 将字体大小设置为 30 像素，行高为 36 像素。
• text-4xl: 将字体大小设置为 36 像素，行高为 40 像素。
• text-5xl: 将字体字体大小设置为 48 像素，行高为默认。
• text-6xl:将字体大小设置为 60 像素，行高为默认。
• text-7xl:将字体大小设置为 72 像素，行高为默认。
• text-8xl:将字体大小设置为 96 像素，行高为默认。
• text-9xl:将字体大小设置为 128 像素，行高为默认。

Tailwind CSS 字体大小类示例

以下是一些 Tailwind CSS 字体大小类示例，展示了如何使用预定义类轻松调整和管理文本大小。

设置字体大小

此示例展示了如何使用Tailwind CSS 实用类。此处，"text-xs"将字体大小设置为 12px，"text-sm"设置为 14px，"text-base"设置为 16px，"text-lg"设置为 18px。字体大小范围从"text-xl"到"text-9xl"。

示例

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

<body class="p-4">
    <h1 class="text-2xl font-bold">
        Tailwind CSS Font Size
    </h1>  
    <br>
    <p class="text-xs mb-4">
        Hey, I am with font size 12px (text-xs).
    </p>
    <p class="text-sm mb-4">
        Hey, I am with font size 14px (text-sm).
    </p>
    <p class="text-base mb-4">
        Hey, I am with font size 16px (text-base).
    </p> 
    <p class="text-lg mb-4">
        Hey, I am with font size 18px (text-lg).
    </p>
    <p class="text-xl mb-4">
        Hey, I am with font size 20px (text-xl).
    </p>
    <p class="text-2xl">
        Hey, I am with font size 24px (text-2xl).
    </p> 
</body>

</html>

使用 Tailwind CSS 实用类 设置字体大小时，行高会根据类进行相应调整。您可以使用 'line-height' 比例中定义的任何值，也可以使用任意值来定义行高。使用 Tailwind CSS，字体大小最大可达 9xl。