字体大小与字体粗细
使用 text-sm 到 text-9xl 以及 font-thin 到 font-black，控制文本的视觉突出程度。
字体大小与字体粗细 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Tailwind CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Tailwind CSS Academy 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Tailwind's Font Size Scale
Set text size with the text-* scale, from text-xs up to text-9xl. Pick from these steps instead of typing pixels, and your typography stays consistent.
<p class="text-xs">Extra Small (12px)</p>
<p class="text-sm">Small (14px)</p>
<p class="text-base">Base (16px)</p>
<p class="text-lg">Large (18px)</p>
<p class="text-xl">Extra Large (20px)</p>
<p class="text-2xl">2XL (24px)</p>
<p class="text-4xl">4XL (36px)</p>
<p class="text-6xl">6XL (60px)</p>Display and Hero Text Sizes
For big display text on hero sections, reach for text-7xl, text-8xl, or text-9xl. Pair them with font-extrabold and tracking-tight for headlines that grab attention.
<h1 class="text-7xl font-black tracking-tight text-gray-900">
Make it big.
</h1>Font Weight Utilities
Control thickness with font weight: font-normal for body, font-semibold for labels, font-bold for headings, and font-extrabold or font-black for big emphasis.
<p class="font-thin">Thin (100)</p>
<p class="font-light">Light (300)</p>
<p class="font-normal">Normal (400)</p>
<p class="font-medium">Medium (500)</p>
<p class="font-semibold">Semibold (600)</p>
<p class="font-bold">Bold (700)</p>
<p class="font-extrabold">Extrabold (800)</p>
<p class="font-black">Black (900)</p>Combining Size and Weight
Size and weight are independent, so they team up: text-sm font-medium for a nav label, text-4xl font-bold for a heading. Together they build hierarchy.
<!-- Article typographic hierarchy -->
<h1 class="text-4xl font-bold text-gray-900 mb-2">Main Headline</h1>
<h2 class="text-2xl font-semibold text-gray-700 mb-4">Section Title</h2>
<p class="text-base font-normal text-gray-600 mb-2">Body paragraph text...</p>
<span class="text-xs font-medium text-gray-400">Caption or metadata</span>Responsive Font Sizes
Type can scale with the screen. Add a breakpoint prefix like md: to any size — text-3xl md:text-5xl is small on phones and large on desktops.
<h1 class="text-2xl md:text-4xl lg:text-6xl font-extrabold text-gray-900">
Scales with the screen
</h1>Font Style: Italic
Add italic to slant text and not-italic to reset it. It is great for quotes and citations — italic font-light text-gray-500 gives that classic testimonial feel.
<blockquote class="italic font-light text-gray-500 text-lg border-l-4 border-indigo-400 pl-4">
'Tailwind makes styling enjoyable again.'
</blockquote>
<cite class="text-sm font-medium text-gray-700">— A happy developer</cite>Font Variant Numeric
For numbers, tabular-nums makes every digit the same width, so prices and stats line up neatly in tables and columns. A small touch that looks very tidy.
<!-- Tabular numbers align in columns -->
<table>
<tr>
<td class="tabular-nums text-right">1,234.56</td>
</tr>
<tr>
<td class="tabular-nums text-right">98,765.00</td>
</tr>
</table>Practical: Navigation Typography
Nav links love a small, medium look: text-sm font-medium. Mark the active link by bumping it to font-semibold text-indigo-600 so it stands apart.
<nav class="flex gap-6">
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">Home</a>
<a href="#" class="text-sm font-semibold text-indigo-600">Products</a>
<a href="#" class="text-sm font-medium text-gray-600 hover:text-gray-900">About</a>
</nav>Practical: Article Body Text
Comfortable body text is text-base or text-lg with relaxed spacing and text-gray-700, not harsh black. Add max-w-prose to keep lines at an easy reading width.
<article class="max-w-prose mx-auto">
<p class="text-lg font-normal text-gray-700 leading-relaxed">
This is body text set at a comfortable reading size.
The max-w-prose constraint keeps lines short enough
to read without losing your place.
</p>
</article>Practical: Data Display Typography
For dashboards, make numbers pop: text-3xl font-bold text-gray-900 for a value, with a smaller text-sm uppercase tracking-wider label above it.
<div class="text-center">
<p class="text-sm font-medium text-gray-500 uppercase tracking-wider">
Total Users
</p>
<p class="text-3xl font-bold text-gray-900 tabular-nums">
24,781
</p>
</div>Common Font Size Reference
A quick mental map: text-xs for captions, text-base for body, text-2xl to text-4xl for headings, text-5xl and up for hero text. Match each with the right weight.
Quick Check
Quick check! See how size and weight stuck. 🔤
Lesson Recap
Nice! text-* controls size, font-thin through font-black sets weight, and mixing size, weight, and color builds hierarchy. Next up: text color and opacity.
常见问题解答
「字体大小与字体粗细」课时是免费的吗？
是的 — 「字体大小与字体粗细」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「字体大小与字体粗细」这节课中我会学到什么？
使用 text-sm 到 text-9xl 以及 font-thin 到 font-black，控制文本的视觉突出程度。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「字体大小与字体粗细」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。