CSS Stretch Font

CSS Stretch Font 是一種CSS文本效果，為頁面文本的可視呈現添加非常有趣的效果。通過對文本伸展應用CSS伸展值，文本將變得更寬或更窄，甚至可能被扭曲或拉伸等效果。

一、基本用法

僅在CSS中使用stretch值即可為文本應用CSS Stretch Font，如下：

    h1 {
        font-size: 50px;
        font-weight: bold;
        font-stretch: ultra-expanded;
    }

在上面的代碼示例中，我們使用font-stretch屬性選項ultra-expanded來實現stretch效果，這將使文本變得更寬。

二、font-stretch 屬性

font-stretch屬性定義了一個文本的寬度，可以為文本定義比正常寬度更窄或更寬的值。值可以是一個關鍵字，如condensed或expanded，也可以是一個數字值，指定為一個百分比或一個細的數字（如400）。

1. 關鍵字

以下是可用於font-stretch屬性的一些關鍵字：

• normal：文本的正常寬度。
• ultra-condensed：文本變得非常窄。
• extra-condensed：文本比condensed更窄。
• condensed：文本變窄。
• semi-condensed：文本比normal條件下更窄。
• semi-expanded：文本比normal條件下更寬。
• expanded：文本變寬。
• extra-expanded：文本比expanded更寬。
• ultra-expanded：文本變得非常寬。

2. 數字

在font-stretch屬性中，數字值也可以用來表示文本的寬度，如下：

    h1 {
        font-size: 50px;
        font-weight: bold;
        font-stretch: 250%;
    }

在上面的代碼示例中，我們將font-stretch屬性設置為250%，表示文本的寬度是正常寬度的2.5倍。

三、兼容性

CSS Stretch Font作為CSS3效果，不是所有的瀏覽器都支持它，以下是CSS Stretch Font的瀏覽器兼容性：

• Chrome：6+
• Edge：12+
• Firefox：9+
• IE：不支持
• Opera：15+
• Safari：7+

四、總結

CSS Stretch Font可以給網頁設計師提供更多的文本效果，但需要注意的是，如果您想使網站兼容性更好，考慮使用其他文本效果支持更廣泛的方案。