编辑“︁CSS字体拉伸”︁

{{DISPLAYTITLE: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`调整字体宽度：  

<syntaxhighlight lang="css">  
/* 使用关键字 */  
.condensed-text {  
    font-stretch: condensed;  
}  

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

=== 输入与输出对比 ===  
假设字体支持宽度变体，效果如下：  
* 原始文本：`<span style="font-family: 'Arial'">Hello World</span>` → "Hello World"  
* 压缩文本：`<span style="font-family: 'Arial'; font-stretch: 75%;">Hello World</span>` → "𝖧𝖾𝗅𝗅𝗈 𝖶𝗈𝗋𝗅𝖽"（模拟效果）  
* 扩展文本：`<span style="font-family: 'Arial'; font-stretch: 125%;">Hello World</span>` → "𝐇𝐞𝐥𝐥𝐨 𝐖𝐨𝐫𝐥𝐝"（模拟效果）  

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

== 实际应用场景 ==  
1. '''响应式排版'''：在窄屏设备中使用压缩字体以节省空间。  
   <syntaxhighlight lang="css">  
   @media (max-width: 600px) {  
       body { font-stretch: 90%; }  
   }  
   </syntaxhighlight>  

2. '''标题设计'''：扩展字体增强视觉冲击力。  
   <syntaxhighlight lang="css">  
   h1 { font-stretch: 120%; }  
   </syntaxhighlight>  

3. '''可变字体控制'''：结合`@font-face`定义自定义宽度。  
   <syntaxhighlight lang="css">  
   @font-face {  
       font-family: 'VariableFont';  
       src: url('font.woff2') format('woff2-variations');  
       font-stretch: 75% 125%; /* 定义可变范围 */  
   }  
   </syntaxhighlight>  

== 高级技巧 ==  
=== 动态调整与动画 ===  
通过CSS动画实现字体宽度平滑过渡（需字体支持）：  
<syntaxhighlight lang="css">  
@keyframes stretch {  
    0% { font-stretch: 100%; }  
    50% { font-stretch: 150%; }  
    100% { font-stretch: 100%; }  
}  
.animated-text {  
    animation: stretch 3s infinite;  
}  
</syntaxhighlight>  

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

== 兼容性提示 ==  
* 测试时务必使用支持宽度变体的字体（如[Google Fonts中的可变字体](https://fonts.google.com/)）。  
* 旧版浏览器需提供备用方案：  
  <syntaxhighlight lang="css">  
  .fallback-text {  
      font-family: 'NarrowFont', sans-serif; /* 显式指定窄体字体 */  
  }  
  </syntaxhighlight>  

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

[[Category:编程语言]]
[[Category:CSS]]
[[Category:CSS文本与字体]]