Tailwind CSS - 字体大小

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

Tailwind CSS 字体大小类

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

类	CSS 属性
text-xs	font-size: 0.75rem; /* 12px / line-height: 1rem; / 16px */
text-sm	font-size: 0.875rem; /* 14px / line-height: 1.25rem; / 20px */
text-base	font-size: 1rem; /* 16px / line-height: 1.5rem; / 24px */
text-lg	font-size: 1.125rem; /* 18px / line-height: 1.75rem; / 28px */
text-xl	font-size: 1.25rem; /* 20px / line-height: 1.75rem; / 28px */
text-2xl	font-size: 1.5rem; /* 24px / line-height: 2rem; / 32px */
text-3xl	font-size: 1.875rem; /* 30px / line-height: 2.25rem; / 36px */
text-4xl	font-size: 2.25rem; /* 36px / line-height: 2.5rem; / 40px */
text-5xl	font-size: 3rem; /* 48px */ line-height: 1;
text-6xl	font-size: 3.75rem; /* 60px */ line-height: 1;
text-7xl	font-size: 4.5rem; /* 72px */ line-height: 1;
text-8xl	font-size: 6rem; /* 96px */ line-height: 1;
text-9xl	font-size: 8rem; /* 128px */ line-height: 1;

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 像素，使用默认行高。

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 实用程序类应用不同字体大小的方法。这里，“text-xs”将字体大小设置为 12px，“text-sm”设置为 14px，“text-base”设置为 16px，“text-lg”设置为 18px。大小范围从“text-xl”到“text-9xl”。

示例

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">
        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 实用程序类设置字体大小时，行高会根据类进行相应调整。您可以使用在“行高”比例尺中定义的任何值，或使用任意值来定义行高。使用 tailwind CSS，字体大小可以达到 9xl。

打印页面