在CSS3中，除了基本的字體樣式（如字體家族、字體大小、粗細等），還有一個值得關注的功能—— CSS3字體的拉伸。字體拉伸是指改變字體寬度，使其看起來更窄或更寬。
要實現字體拉伸，我們可以利用CSS3的“font-stretch”屬性。這個屬性接受以下值：
font-stretch: normal; /* 默認值，不進行拉伸 */ font-stretch: ultra-condensed; font-stretch: extra-condensed; font-stretch: condensed; font-stretch: semi-condensed; font-stretch: semi-expanded; font-stretch: expanded; font-stretch: extra-expanded; font-stretch: ultra-expanded;
這些值分別對應不同程度的拉伸效果。如“ultra-condensed”表示最大程度的拉伸，使字體看起來非常窄，而“ultra-expanded”則表示最大程度的拉伸，使字體看起來非常寬。
下面是一個例子，展示如何使用“font-stretch”屬性來拉伸字體：
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 20px;
}
.condensed {
font-stretch: condensed;
}
.expanded {
font-stretch: expanded;
}
</style>
</head>
<body>
<p>這是一個普通的段落。</p>
<p class="condensed">這是一個窄字體的段落。</p>
<p class="expanded">這是一個寬字體的段落。</p>
</body>
</html>在上面的例子中，我們設置了一個普通的段落，以及一個使用“condensed”屬性的段落和一個使用“expanded”屬性的段落，展示了不同程度的拉伸效果。
需要注意的是，字體拉伸功能并不是所有字體都支持的。因此，在使用字體拉伸功能時，我們需要確保所使用的字體支持該屬性。