CSS中的font-stretch属性详解

描述
font-stretch属性用于控制文字的宽度变形，让字体可以在更窄或更宽的范围内显示。这个属性主要对支持宽度变体的字体家族（如可变字体）有效，对于传统固定宽度的字体效果有限。

字体宽度等级
该属性使用预定义的关键字值，对应不同的宽度等级（以正常宽度的百分比表示）：

• ultra-condensed: 50%（最窄）
• extra-condensed: 62.5%
• condensed: 75%
• semi-condensed: 87.5%
• normal: 100%（默认值）
• semi-expanded: 112.5%
• expanded: 125%
• extra-expanded: 150%
• ultra-expanded: 200%（最宽）

基本使用

1. 语法格式：font-stretch: <关键字> | <百分比>
2. 现代CSS也支持百分比值（50%-200%）

示例演示

.narrow {
  font-stretch: condensed;  /* 压缩75%宽度 */
}

.wide {
  font-stretch: expanded;   /* 扩展125%宽度 */
}

.percentage {
  font-stretch: 80%;        /* 使用百分比值 */
}

实际应用场景

1. 标题设计：扩展字体宽度创造视觉冲击力
2. 空间受限布局：压缩字体适应狭窄空间
3. 可变字体优化：充分利用可变字体的宽度轴特性

浏览器兼容性说明

1. 传统字体：需要字体家族包含对应的宽度变体
2. 可变字体：可平滑过渡任意宽度值
3. 回退机制：浏览器会自动选择最接近的可用变体

注意事项

• 该属性对不支持宽度变体的字体效果不明显
• 建议与font-family配合使用，确保字体支持宽度变体
• 百分比值在现代浏览器中得到良好支持

通过合理使用font-stretch，可以在保持字体风格统一的同时，实现更灵活的版面设计效果。