Tailwind CSS 字体粗细

简介

Tailwind CSS 是一种现代的 CSS 框架，它使用类名来定义样式。Tailwind CSS 提供了一种灵活的方式来定义字体样式，其中包括字体粗细。

Font Weight（字体粗细）是一个很重要的字体样式属性，根据不同的应用场景，我们都会需要字体有不同的粗细。Tailwind CSS 为字体粗细提供了很多实用的类名，下面将一一介绍。

代码片段

Tailwind CSS 中的字体粗细类名有若干种，具体如下：

Thin

如果希望字体细如蝉翼，可以使用 font-thin 或 font-extrathin 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-thin">The quick brown fox jumps over the lazy dog.</span>
<span class="font-extrathin">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Light

如果希望字体轻盈如风，可以使用 font-light 或 font-extralight 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-light">The quick brown fox jumps over the lazy dog.</span>
<span class="font-extralight">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

Normal

如果希望字体普通常规，可以使用 font-normal 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-normal">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Medium

如果希望字体中等粗细，可以使用 font-medium 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-medium">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Semibold

如果希望字体半粗体，可以使用 font-semibold 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-semibold">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Bold

如果希望字体粗体，可以使用 font-bold 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-bold">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Extrabold

如果希望字体超粗体，可以使用 font-extrabold 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-extrabold">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.

Black

如果希望字体黑体，可以使用 font-black 或 font-heavy 类名。

The quick brown fox jumps over the lazy dog.    
<span class="font-black">The quick brown fox jumps over the lazy dog.</span>
<span class="font-heavy">The quick brown fox jumps over the lazy dog.</span>

效果如下：

The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

结论

Tailwind CSS 为字体粗细提供了一系列实用的类名，可以方便地定义各种字体样式。使用 Tailwind CSS，你可以轻松实现各种字体效果，提高网站的用户体验。