CSS | font-stretch 属性介绍

在 CSS 中，font-stretch 属性用于控制字体的拉伸程度。它可以让你在精确控制字体的进行细微调整。

语法

font-stretch: normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;

• normal：默认值，不进行任何拉伸。
• ultra-condensed：最大拉伸程度。
• extra-condensed：很强的拉伸程度。
• condensed：相对较强的拉伸程度。
• semi-condensed：适度的拉伸程度。
• semi-expanded：适度的粗细程度。
• expanded：相对较强的粗细程度。
• extra-expanded：很强的粗细程度。
• ultra-expanded：最大粗细程度。

实例

让我们看下面这段代码：

h1 {
  font-stretch: ultra-expanded;
}

这会将页面中所有的 h1 元素的字体拉伸程度都设置为最大。

注意事项

• 这个属性不是所有字体都支持。
• 请谨慎使用这个属性。如果拉伸太厉害，可能导致字母的重心发生变化，从而导致字体在不同浏览器和系统下显示不一致。

结论

CSS 中的 font-stretch 属性可以让你更好地精细调节字体样式。如果你需要调整字体的拉伸程度，这个属性绝对值得一试。