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可以给网页设计师提供更多的文本效果，但需要注意的是，如果您想使网站兼容性更好，考虑使用其他文本效果支持更广泛的方案。