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>

列印頁面