CSS font-stretch 属性详解：字体宽度缩放控制指南
概述
CSS font-stretch 属性允许开发者从字体系列中选择正常、扩展或压缩的字体变体。该属性用于设置文本相对于字体默认宽度的扩展或压缩效果，但仅对具有宽度变体的字体系列有效，对于没有压缩或扩展变体的字体则不会产生效果。
属性语法与取值
基本语法结构
selector {
font-stretch: keyword | percentage;
}
关键字取值详解
压缩系列（Condensed）
/* 正常宽度 */
.normal {
font-stretch: normal; /* 默认值，不进行任何拉伸 */
}
/* 半压缩 */
.semi-condensed {
font-stretch: semi-condensed; /* 轻微压缩，比正常窄但比压缩宽 */
}
/* 压缩 */
.condensed {
font-stretch: condensed; /* 明显压缩，比半压缩窄但比超压缩宽 */
}
/* 超压缩 */
.extra-condensed {
font-stretch: extra-condensed; /* 高度压缩，比压缩窄但比极限压缩宽 */
}
/* 极限压缩 */
.ultra-condensed {
font-stretch: ultra-condensed; /* 极限压缩，最窄的宽度变体 */
}
扩展系列（Expanded）
/* 半扩展 */
.semi-expanded {
font-stretch: semi-expanded; /* 轻微扩展，比正常宽但比扩展窄 */
}
/* 扩展 */
.expanded {
font-stretch: expanded; /* 明显扩展，比半扩展宽但比超扩展窄 */
}
/* 超扩展 */
.extra-expanded {
font-stretch: extra-expanded; /* 高度扩展，比扩展宽但比极限扩展窄 */
}
/* 极限扩展 */
.ultra-expanded {
font-stretch: ultra-expanded; /* 极限扩展，最宽的宽度变体 */
}
百分比取值
/* 百分比值范围 */
.percentage-50 {
font-stretch: 50%; /* 50% 压缩 */
}
.percentage-75 {
font-stretch: 75%; /* 25% 压缩 */
}
.percentage-100 {
font-stretch: 100%; /* 正常宽度 */
}
.percentage-125 {
font-stretch: 125%; /* 25% 扩展 */
}
.percentage-150 {
font-stretch: 150%; /* 50% 扩展 */
}
实际应用示例
基础使用示例
/* 基础字体设置 */
.base-font {
font-family: "Helvetica Neue", Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
/* 标题压缩效果 */
.condensed-heading {
font-stretch: condensed;
font-weight: 700;
font-size: 2rem;
letter-spacing: -0.5px;
}
/* 引用扩展效果 */
.expanded-quote {
font-stretch: expanded;
font-style: italic;
font-size: 1.2rem;
color: #666;
}
/* 代码压缩显示 */
.condensed-code {
font-stretch: semi-condensed;
font-family: "Monaco", "Consolas", monospace;
background: #f4f4f4;
padding: 10px;
border-radius: 4px;
}
响应式字体宽度调整
/* 移动端优化 */
.mobile-text {
font-stretch: normal;
font-size: 14px;
}
/* 平板设备 */
@media (min-width: 768px) {
.tablet-text {
font-stretch: semi-expanded;
font-size: 16px;
}
}
/* 桌面设备 */
@media (min-width: 1024px) {
.desktop-text {
font-stretch: expanded;
font-size: 18px;
}
}
/* 大屏设备 */
@media (min-width: 1440px) {
.large-screen-text {
font-stretch: ultra-expanded;
font-size: 20px;
}
}
完整示例演示
HTML 结构示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体宽度拉伸示例</title>
<style>
body {
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
max-width: 1000px;
margin: 0 auto;
padding: 20px;
background-color: #f8f9fa;
}
.stretch-demo {
margin: 20px 0;
padding: 15px;
border: 1px solid #dee2e6;
border-radius: 8px;
background-color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.demo-title {
font-weight: 600;
color: #495057;
margin-bottom: 10px;
font-size: 1.1rem;
}
.demo-content {
font-size: 1.2rem;
color: #007bff;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
/* 压缩系列样式 */
.ultra-condensed-demo { font-stretch: ultra-condensed; }
.extra-condensed-demo { font-stretch: extra-condensed; }
.condensed-demo { font-stretch: condensed; }
.semi-condensed-demo { font-stretch: semi-condensed; }
/* 正常样式 */
.normal-demo { font-stretch: normal; }
/* 扩展系列样式 */
.semi-expanded-demo { font-stretch: semi-expanded; }
.expanded-demo { font-stretch: expanded; }
.extra-expanded-demo { font-stretch: extra-expanded; }
.ultra-expanded-demo { font-stretch: ultra-expanded; }
</style>
</head>
<body>
<h1>CSS font-stretch 属性演示</h1>
<div class="stretch-demo">
<div class="demo-title">极限压缩 (ultra-condensed)</div>
<div class="demo-content ultra-condensed-demo">
这段文字使用极限压缩效果，字符间距小化
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">超压缩 (extra-condensed)</div>
<div class="demo-content extra-condensed-demo">
这段文字使用超压缩效果，适合紧凑布局
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">压缩 (condensed)</div>
<div class="demo-content condensed-demo">
这段文字使用压缩效果，节省水平空间
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">半压缩 (semi-condensed)</div>
<div class="demo-content semi-condensed-demo">
这段文字使用半压缩效果，轻微收缩字符宽度
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">正常宽度 (normal)</div>
<div class="demo-content normal-demo">
这段文字使用正常宽度，保持字体原始比例
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">半扩展 (semi-expanded)</div>
<div class="demo-content semi-expanded-demo">
这段文字使用半扩展效果，轻微扩展字符宽度
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">扩展 (expanded)</div>
<div class="demo-content expanded-demo">
这段文字使用扩展效果，增加字符间距
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">超扩展 (extra-expanded)</div>
<div class="demo-content extra-expanded-demo">
这段文字使用超扩展效果，显著增加字符宽度
</div>
</div>
<div class="stretch-demo">
<div class="demo-title">极限扩展 (ultra-expanded)</div>
<div class="demo-content ultra-expanded-demo">
这段文字使用极限扩展效果，较大化字符宽度
</div>
</div>
</body>
</html>
字体兼容性考虑
支持字体检查
/* 检查字体是否支持宽度变体 */
@font-face {
font-family: 'VariableFont';
src: url('font.woff2') format('woff2-variations');
font-stretch: 75% 125%; /* 定义支持的宽度范围 */
}
/* 回退方案 */
.fallback-style {
font-stretch: condensed;
letter-spacing: -0.5px; /* 不支持时的替代方案 */
}
/* 现代字体特性检测 */
@supports (font-stretch: ultra-condensed) {
.modern-support {
font-stretch: ultra-condensed;
}
}
@supports not (font-stretch: ultra-condensed) {
.modern-support {
letter-spacing: -1px;
font-size: 0.95em;
}
}
本节课程知识要点
-
字体变体支持：了解字体宽度变体的兼容性要求
-
渐进增强：为不支持该属性的浏览器提供回退方案
-
响应式设计：根据不同屏幕尺寸调整字体宽度
-
性能考虑：使用可变字体优化多宽度变体的加载
-
可访问性：确保字体宽度变化不影响文本可读性
-
设计一致性：在整个项目中保持统一的字体宽度使用规范
浏览器兼容性提示
-
现代浏览器对
font-stretch属性支持良好 -
需要字体本身支持相应的宽度变体
-
可变字体（Variable Fonts）提供更好的宽度控制支持
-
旧版浏览器可能需要使用
letter-spacing作为替代方案
通过合理使用 font-stretch 属性，开发者可以创建出更加丰富和灵活的排版效果。
