CSS3 文本样式 - font-stretch 属性

核心知识点

font-stretch 属性的概念

font-stretch 属性用于控制字体的拉伸程度，即字体的宽度。它允许您选择字体的不同宽度变体，从 condensed（ condensed）到 expanded（ expanded）。

font-stretch 属性的值

值 描述 数值等价
normal 默认值，使用字体的正常宽度 100%
ultra-condensed 最 condensed 的字体宽度 50%
extra-condensed 非常 condensed 的字体宽度 62.5%
condensed condensed 的字体宽度 75%
semi-condensed 稍微 condensed 的字体宽度 87.5%
semi-expanded 稍微 expanded 的字体宽度 112.5%
expanded expanded 的字体宽度 125%
extra-expanded 非常 expanded 的字体宽度 150%
ultra-expanded 最 expanded 的字体宽度 200%
percentage 使用百分比指定字体宽度，范围从 50% 到 200% -

注意事项

  • font-stretch 属性的效果取决于字体是否提供了不同宽度的变体
  • 并非所有字体都支持所有的 font-stretch 值
  • 对于不支持的宽度变体，浏览器会选择最接近的可用宽度
  • 当使用百分比值时，浏览器会选择最接近的字体宽度变体

学习目标

  1. 理解 font-stretch 属性的作用和不同值的效果
  2. 掌握如何使用 font-stretch 属性控制字体的拉伸程度
  3. 了解如何使用百分比值精确控制字体宽度
  4. 能够根据不同场景选择合适的 font-stretch 值

代码示例

基本用法示例

/* 示例 1: 不同 font-stretch 值 */
.normal {
  font-stretch: normal;
  font-size: 18px;
}

.ultra-condensed {
  font-stretch: ultra-condensed;
  font-size: 18px;
}

.extra-condensed {
  font-stretch: extra-condensed;
  font-size: 18px;
}

.condensed {
  font-stretch: condensed;
  font-size: 18px;
}

.semi-condensed {
  font-stretch: semi-condensed;
  font-size: 18px;
}

.semi-expanded {
  font-stretch: semi-expanded;
  font-size: 18px;
}

.expanded {
  font-stretch: expanded;
  font-size: 18px;
}

.extra-expanded {
  font-stretch: extra-expanded;
  font-size: 18px;
}

.ultra-expanded {
  font-stretch: ultra-expanded;
  font-size: 18px;
}

/* 示例 2: 使用百分比值 */
.percent-75 {
  font-stretch: 75%; /* 等价于 condensed */
  font-size: 18px;
}

.percent-100 {
  font-stretch: 100%; /* 等价于 normal */
  font-size: 18px;
}

.percent-125 {
  font-stretch: 125%; /* 等价于 expanded */
  font-size: 18px;
}

.percent-150 {
  font-stretch: 150%; /* 等价于 extra-expanded */
  font-size: 18px;
}

.percent-200 {
  font-stretch: 200%; /* 等价于 ultra-expanded */
  font-size: 18px;
}

/* 示例 3: 与其他字体属性结合使用 */
.combined {
  font-family: "Arial", sans-serif;
  font-stretch: condensed;
  font-weight: bold;
  font-size: 20px;
  color: #333;
}

HTML 结构

<h3>不同 font-stretch 值：</h3>
<p class="normal">
  Normal: This is a sample text with normal font stretch. 
  正常：这是一段使用正常字体宽度的示例文本。
</p>

<p class="ultra-condensed">
  Ultra-condensed: This is a sample text with ultra-condensed font stretch. 
  最 condensed：这是一段使用最 condensed 字体宽度的示例文本。
</p>

<p class="extra-condensed">
  Extra-condensed: This is a sample text with extra-condensed font stretch. 
  非常 condensed：这是一段使用非常 condensed 字体宽度的示例文本。
</p>

<p class="condensed">
  Condensed: This is a sample text with condensed font stretch. 
  Condensed：这是一段使用 condensed 字体宽度的示例文本。
</p>

<p class="semi-condensed">
  Semi-condensed: This is a sample text with semi-condensed font stretch. 
  稍微 condensed：这是一段使用稍微 condensed 字体宽度的示例文本。
</p>

<p class="semi-expanded">
  Semi-expanded: This is a sample text with semi-expanded font stretch. 
  稍微 expanded：这是一段使用稍微 expanded 字体宽度的示例文本。
</p>

<p class="expanded">
  Expanded: This is a sample text with expanded font stretch. 
  Expanded：这是一段使用 expanded 字体宽度的示例文本。
</p>

<p class="extra-expanded">
  Extra-expanded: This is a sample text with extra-expanded font stretch. 
  非常 expanded：这是一段使用非常 expanded 字体宽度的示例文本。
</p>

<p class="ultra-expanded">
  Ultra-expanded: This is a sample text with ultra-expanded font stretch. 
  最 expanded：这是一段使用最 expanded 字体宽度的示例文本。
</p>

<h3>使用百分比值：</h3>
<p class="percent-75">
  75% (condensed): This is a sample text with 75% font stretch. 
  75% (condensed)：这是一段使用 75% 字体宽度的示例文本。
</p>

<p class="percent-100">
  100% (normal): This is a sample text with 100% font stretch. 
  100% (normal)：这是一段使用 100% 字体宽度的示例文本。
</p>

<p class="percent-125">
  125% (expanded): This is a sample text with 125% font stretch. 
  125% (expanded)：这是一段使用 125% 字体宽度的示例文本。
</p>

<p class="percent-150">
  150% (extra-expanded): This is a sample text with 150% font stretch. 
  150% (extra-expanded)：这是一段使用 150% 字体宽度的示例文本。
</p>

<p class="percent-200">
  200% (ultra-expanded): This is a sample text with 200% font stretch. 
  200% (ultra-expanded)：这是一段使用 200% 字体宽度的示例文本。
</p>

<h3>与其他字体属性结合使用：</h3>
<p class="combined">
  This is a sample text with combined font properties. 
  这是一段使用组合字体属性的示例文本。
</p>

实用案例分析

案例 1: 标题样式

在标题中使用不同的字体拉伸程度可以增加视觉层次感：

.main-title {
  font-family: "Arial Black", sans-serif;
  font-stretch: expanded;
  font-size: 36px;
  font-weight: bold;
  margin-bottom: 20px;
  letter-spacing: 1px;
}

.sub-title {
  font-family: "Arial", sans-serif;
  font-stretch: condensed;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #666;
}

.section-title {
  font-family: "Arial", sans-serif;
  font-stretch: semi-condensed;
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

案例 2: 导航菜单样式

在导航菜单中使用 condensed 字体可以在有限空间内显示更多菜单项：

.nav {
  display: flex;
  background-color: #333;
  padding: 0 20px;
}

.nav-item {
  font-family: "Arial", sans-serif;
  font-stretch: condensed;
  font-size: 14px;
  font-weight: bold;
  color: white;
  padding: 15px 20px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.nav-item:hover {
  background-color: #555;
}

.nav-item.active {
  background-color: #007bff;
}

案例 3: 强调文本样式

在强调文本中使用 expanded 字体可以增加视觉冲击力：

.emphasis {
  font-family: "Arial", sans-serif;
  font-stretch: expanded;
  font-size: 18px;
  font-weight: bold;
  color: #007bff;
  padding: 10px;
  background-color: #f0f8ff;
  border-radius: 4px;
  display: inline-block;
}

.call-to-action {
  font-family: "Arial Black", sans-serif;
  font-stretch: extra-expanded;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: #28a745;
  padding: 15px 30px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.call-to-action:hover {
  background-color: #218838;
}

ASCII 示意图

font-stretch 不同值的效果对比

+---------------------+------------------------+------------------------+
| 值                  | 效果                   | 适用场景               |
+---------------------+------------------------+------------------------+
| normal              | 正常字体宽度           | 普通文本               |
| ultra-condensed     | 最 condensed 的宽度    | 空间有限的导航菜单     |
| extra-condensed     | 非常 condensed 的宽度  | 导航菜单、紧凑布局     |
| condensed           | condensed 的宽度       | 导航菜单、小标题       |
| semi-condensed      | 稍微 condensed 的宽度  | 小标题、标签           |
| semi-expanded       | 稍微 expanded 的宽度   | 强调文本、副标题       |
| expanded            | expanded 的宽度        | 主标题、强调文本       |
| extra-expanded      | 非常 expanded 的宽度   | 广告标语、大标题       |
| ultra-expanded      | 最 expanded 的宽度     | 特殊效果、品牌标语     |
+---------------------+------------------------+------------------------+

字体拉伸效果示例

/* ultra-condensed */
This is a sample text

/* condensed */
This is a sample text

/* normal */
This is a sample text

/* expanded */
This is a sample text

/* ultra-expanded */
This is a sample text

实践练习

练习 1: 实现标题的字体拉伸效果

创建一个页面，包含主标题、副标题和section标题，为不同级别的标题应用不同的font-stretch值，观察效果。

练习 2: 实现导航菜单的字体拉伸效果

创建一个导航菜单，使用condensed字体拉伸效果，在有限空间内显示更多菜单项，添加hover和active状态的样式。

练习 3: 实现强调文本的字体拉伸效果

创建一个包含强调文本和号召性按钮的页面，为强调文本使用semi-expanded字体拉伸效果，为号召性按钮使用extra-expanded字体拉伸效果，添加适当的背景色和边框，增强视觉效果。

总结

font-stretch 属性是 CSS3 中控制字体拉伸程度的重要属性，通过设置不同的值，可以实现各种字体宽度效果：

  • 从 ultra-condensed 到 ultra-expanded，提供了9个预设的字体宽度值
  • 可以使用百分比值精确控制字体宽度，范围从 50% 到 200%
  • 与其他字体属性（如 font-family、font-size、font-weight）结合使用，可以创建丰富的文本效果

需要注意的是，font-stretch 的效果取决于字体是否提供了不同宽度的变体，并非所有字体都支持所有的 font-stretch 值。在使用时，应选择支持所需宽度变体的字体，并提供适当的回退方案，以确保在不同浏览器和设备上都能获得良好的显示效果。

合理使用 font-stretch 属性，可以为文本添加独特的视觉效果，增强页面的设计感和层次感，使文本在不同场景下都能达到最佳的显示效果。

« 上一篇 CSS3 文本样式 - font-variant 属性 下一篇 » CSS3 盒模型 - width 属性
↑