CSS - 字型

CSS 字型允許使用各種與字型相關的屬性來自定義網頁的字型樣式。在本教程中，我們將瞭解 CSS 中的字型樣式。

什麼是 CSS 字型？

在 CSS 中，font 屬性用於設定和調整網頁中使用的文字型別。

您可以定義字型並透過設定屬性（如font-family, font-size, font-weight 和 font-style.）來自定義其外觀。您還可以使用簡寫屬性font 來操作所有字型樣式。

字型型別的種類

等寬字型：每個字母寬度相同的字型。
襯線字型：每個字母邊緣都有小筆畫的字型。
非襯線字型：沒有筆畫的簡潔字型。
幻想字型：裝飾性的花哨字型。
草書字型：類似於人類手寫的字型。

流行的 CSS 字型

通用字體系列	字型名稱示例
襯線	Times New Roman Georgia Garamond
非襯線	Arial Verdana Helvetica
等寬	Courier New Lucida Console Monaco
草書	Brush Script MT Lucida Handwriting
幻想	Copperplate Papyrus

CSS 字體系列屬性

font-family 屬性用於指定文字內容的字型名稱。

語法

selector {
      font-family: family-name, generic-family;
}

示例

這是一個使用 font-family 屬性的示例。

<html>
<head>
    <style>
        p {
            font-family: Lucida Handwriting, Cursive;
        }
    </style> 
</head>

<body>
    <p >
        This is a font that written in Lucida 
        Handwriting. THis is a font that looks 
        like human handwriting.
    </p>
</body>
</html>

調整字型粗細、大小和樣式

在 CSS 中，我們可以使用font-size, font-weight 和 font-style. 屬性來修改文字的大小、粗細和樣式。

示例

讓我們檢查一個關於此的示例。

<html>
<head>
    <style>
        .font-size-example {
            font-size: 20px; 
        }

        .font-weight-example {
            font-weight: bold; 
        }

        .font-style-example {
            font-style: italic; 
        }
    </style>
</head>

<body>
    <p class="font-size-example">
        This is an example of text with an 
        adjusted font size.
    </p>

    <p class="font-weight-example">
        This is an example of text with an 
        adjusted font weight.
    </p>

    <p class="font-style-example">
        This is an example of text with an 
        adjusted font style.
    </p>
</body>
</html>

CSS 字型簡寫屬性

在 CSS 中，我們可以使用font 簡寫屬性來修改文字的大小、粗細和樣式。

示例

在這個示例中，我們將使用 font 簡寫屬性來設定字型樣式、粗細、大小和系列。

<html>
<head>
    <style>
    .font-example {
        /* in-order: font style, weight, size, family */
        font: italic bold 20px Arial, sans-serif; 
    }
    </style>
</head>

<body>
    <p class="font-example">
        This is an example of text with an adjusted 
        font style, weight, and size using the font 
        shorthand property.
    </p>
</body>
</html>

CSS 與字型相關的屬性

以下是所有與font相關的 CSS 屬性列表

屬性	描述	示例
font-family	指定元素的字型。	試一試
font-size	指定字型的尺寸。	試一試
font-weight	指定字型的粗細。	試一試
font-style	指定字型的樣式（normal、italic、oblique）。	試一試
font-variant	指定文字是否應該以小型大寫字型顯示。	試一試
line-height	指定行高。	試一試

列印頁面