Tailwind CSS - 字体系列



Tailwind CSS 字体系列通过将具有相似设计的多个字体组合在一个名称下,定义了文本在网站上的显示方式。每个字体系列都提供独特的样式或粗细,可以通过实用程序类应用。

Tailwind CSS 字体系列类

下面列出了定义字体系列的 Tailwind CSS 类,每个类都有其独特的设计。

CSS 属性
font-sans font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-serif font-family: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
font-mono font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, Monaco, "Liberation Mono", "Courier New", monospace;

Tailwind CSS 字体系列类的功能

  • font-sans: 一个应用无衬线字体样式到文本的实用程序类,通常用于数字内容和标题。
  • font-serif: 这是一个应用衬线字体样式到文本的实用程序类,可以提高诸如报纸等印刷材料的可读性。
  • font-monospaced: 一个应用等宽字体以实现相等字符间距的实用程序类,通常用于技术内容,例如编码。

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 以**无衬线字体系列**设置文本样式。

示例

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 Family </h1> <p class="underline">Using font-sans</p> <p class="font-sans"> This paragraph uses a Sans font styled with Tailwind CSS. </p> <br> <p class="underline">Not using font-sans</p> <p> This paragraph does not use a sans font styled with Tailwind CSS. </p> </body> </html>

设置衬线字体系列

此示例显示了使用 Tailwind CSS 以**衬线字体系列**设置文本样式。

示例

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 Family </h1> <p class="underline">Using font-serif</p> <p class="font-serif"> This paragraph uses a Serif font styled with Tailwind CSS. </p> <br> <p class="underline"> Not using font-serif </p> <p> This paragraph does not use a serif font styled with Tailwind CSS. </p> </body> </html>

设置等宽字体系列

此示例显示了使用 Tailwind CSS 以**等宽字体系列**设置文本样式。

示例

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 Family </h1> <p class="underline">Using font-mono</p> <p class="font-mono"> This paragraph uses a Monospaced font styled with Tailwind CSS. </p> <br> <p class="underline">Not using font-mono</p> <p> This paragraph does not use a Monospaced font styled with Tailwind CSS. </p> </body> </html>
广告