CSS字体拉伸

CSS字体拉伸（Font Stretching）是CSS中用于调整字体宽度的属性，允许开发者在不改变字体高度的前提下，水平缩放字形。该属性适用于支持可变宽度的字体家族（如可变字体或包含多种宽度变体的字体），常用于排版优化或特殊视觉效果。

基本概念

字体拉伸通过`font-stretch`属性实现，其值表示相对于字体的常规宽度（100%）的缩放比例。该属性仅对支持宽度变体的字体生效，若字体不支持，浏览器会忽略此属性。

属性值

`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%）。
• 百分比值：如`85%`、`120%`等（范围需在1%~1000%之间）。

代码示例

以下示例展示如何通过`font-stretch`调整字体宽度：

  
/* 使用关键字 */  
.condensed-text {  
    font-stretch: condensed;  
}  

/* 使用百分比 */  
.expanded-text {  
    font-stretch: 150%;  
}

输入与输出对比

假设字体支持宽度变体，效果如下：

• 原始文本：`Hello World` → "Hello World"
• 压缩文本：`Hello World` → "𝖧𝖾𝗅𝗅𝗈 𝖶𝗈𝗋𝗅𝖽"（模拟效果）
• 扩展文本：`Hello World` → "𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐝"（模拟效果）

浏览器支持与注意事项

• 支持度：现代浏览器普遍支持`font-stretch`，但需字体本身包含宽度变体。
• 回退机制：若字体不支持指定宽度，浏览器会尝试匹配最接近的值或使用`normal`。
• 与`font-weight`的区别：字体拉伸调整宽度，而字重（如`bold`）调整笔画粗细。

实际应用场景

1. 响应式排版：在窄屏设备中使用压缩字体以节省空间。

  
   @media (max-width: 600px) {  
       body { font-stretch: 90%; }  
   }

2. 标题设计：扩展字体增强视觉冲击力。

  
   h1 { font-stretch: 120%; }

3. 可变字体控制：结合`@font-face`定义自定义宽度。

  
   @font-face {  
       font-family: 'VariableFont';  
       src: url('font.woff2') format('woff2-variations');  
       font-stretch: 75% 125%; /* 定义可变范围 */  
   }

高级技巧

动态调整与动画

通过CSS动画实现字体宽度平滑过渡（需字体支持）：

  
@keyframes stretch {  
    0% { font-stretch: 100%; }  
    50% { font-stretch: 150%; }  
    100% { font-stretch: 100%; }  
}  
.animated-text {  
    animation: stretch 3s infinite;  
}

数学公式与比例

字体拉伸的缩放比例遵循线性关系，计算公式为： $\text{实际宽度}=\text{原始宽度}\times \left(\frac{\text{font-stretch值}}{100}\right)$

兼容性提示

• 测试时务必使用支持宽度变体的字体（如[Google Fonts中的可变字体](https://fonts.google.com/)）。
• 旧版浏览器需提供备用方案：

  
  .fallback-text {  
      font-family: 'NarrowFont', sans-serif; /* 显式指定窄体字体 */  
  }

总结

`font-stretch`是CSS中控制字体宽度的强大工具，尤其适合与可变字体结合使用。开发者应始终检查字体支持性，并合理利用该属性优化设计灵活性和用户体验。