4.1 屬性 font-style
CSS 提供了許多用於管理字體及其在網頁上顯示的屬性。屬性 font-style、font-variant 和 font-stretch 允許調整文本的樣式、顯示和寬度。我們更詳細地看看這些屬性。
屬性 font-style 定義了文本的樣式。它用於設置斜體或普通文本樣式。
值：
normal: 普通文本樣式（預設）italic: 斜體文本oblique: 斜體文本，類似於 italic，但傾斜方式不同
使用範例：
CSS
.normal {
font-style: normal;
}
.italic {
font-style: italic;
}
.oblique {
font-style: oblique;
}
HTML
<body>
<p class="normal">這是普通文本。</p>
<p class="italic">這是斜體文本。</p>
<p class="oblique">這是斜體文本 (oblique)。</p>
</body>
4.2 屬性 font-variant
屬性 font-variant 管理小型大寫字母（即小型大寫）的文本顯示。它允許字體更改為所有字母大寫，但原本的小寫字母大小較小。
值：
normal: 普通文本（預設）small-caps: 小型大寫字母的文本
使用範例：
CSS
.normal {
font-variant: normal;
}
.small-caps {
font-variant: small-caps;
}
HTML
<body>
<p class="normal">這是普通文本。</p>
<p class="small-caps">這是小型大寫字母的文本。</p>
</body>
其他值（CSS Fonts Level 4）
CSS Fonts Level 4 為 font-variant 添加了其他值，例如 all-small-caps、petite-caps、all-petite-caps、unicase 和 titling-caps。但並非所有瀏覽器都支持它們。
4.3 屬性 font-stretch
屬性 font-stretch 管理字體的壓縮或拉伸程度。它改變字體的寬度，而不影響高度，用於選擇合適的字體變體（如果有）。
值：
normal: 普通字體寬度（預設）ultra-condensed: 極度壓縮字體extra-condensed: 非常壓縮字體condensed: 壓縮字體semi-condensed: 稍微壓縮字體semi-expanded: 稍微拉伸字體expanded: 拉伸字體extra-expanded: 非常拉伸字體ultra-expanded: 極度拉伸字體
使用範例：
CSS
.normal {
font-stretch: normal;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
HTML
<body>
<p class="normal">這是普通字體寬度的文本。</p>
<p class="condensed">這是壓縮字體寬度的文本。</p>
<p class="expanded">這是拉伸字體寬度的文本。</p>
</body>
GO TO FULL VERSION