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: 一个应用等宽字体以实现相等字符间距的实用程序类，通常用于技术内容，例如编码。

Tailwind CSS 字体系列类示例

以下是 Tailwind CSS 字体系列类的几个示例，提供了一些简单的方法来使用各种字体选项自定义设计或格式，包括能够直接为网页选择您自己的字体。

设置无衬线字体系列

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

示例

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

示例

<!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 以**等宽字体系列**设置文本样式。

示例

<!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>

打印页面