CSS font-stretch 属性

2025年3月26日 | 阅读 2 分钟

CSS 中的 font-stretch 属性允许我们从字体家族中选择一个正常、扩展或紧缩的字面。此属性可将文本设置为比字体默认宽度更宽或更窄。它并非对所有字体都有效，只对具有宽度变体字面的字体家族有效。

此 CSS 属性仅对具有扩展和紧缩等附加字面的字体有效；否则，对于没有紧缩或扩展字面的字体，它将无效。

选择 font-face 宽度的九种关键字值如下语法所示。

语法

font-stretch: normal | semi-condensed | condensed | extra-condensed | ultra-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded

属性值

此 CSS 属性的属性值如下表所示

关键字	描述
正常	这是默认值，它不会拉伸任何字体。
半紧缩	它略微紧缩了元素的文本字符。此值使文本比正常更窄，但比紧缩更宽。
紧缩	此值使文本比半紧缩更窄，但比极度紧缩更宽。
极度紧缩	此值使文本比紧缩更窄，但比超紧缩更宽。
超紧缩	此值使文本极度变窄。
半扩展	它略微扩展了元素的文本字符。此值使文本比正常更宽，但比扩展更窄。
扩展	此值使文本比半扩展更宽，但比极度扩展更窄。
极度扩展	此值使文本比扩展更宽，但比超扩展更窄。
超扩展	此值使文本极度变宽。

让我们通过一个例子来理解上面的属性值。

示例

<!DOCTYPE html>
<html>
<head>
<title>
CSS font-stretch Property
</title>

<style>
body{
text-align: center;
}
div{
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
color: blue;
}
.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;
}

.semi-expanded {
font-stretch: semi-expanded;
}

.expanded {
font-stretch: expanded;
}
.extra-expanded {
font-stretch: extra-expanded;
}

.ultra-expanded {
font-stretch: ultra-expanded;
}
</style>
</head>

<body>
<h1> Example of the font-stretch property </h1>
<div class = "normal">
normal
</div>

<div class = "semi-condensed">
semi-condensed
</div>
<div class = "condensed">
condensed
</div>

<div class = "extra-condensed">
extra-condensed
</div>

<div class = "ultra-condensed">
ultra-condensed
</div>
<div class = "semi-expanded">
semi-expanded
</div>

<div class = "expanded">
expanded
</div>

<div class = "extra-expanded">
extra-expanded
</div>

<div class = "ultra-expanded">
ultra-expanded
</div>
</body>

</html>

输出

下一主题CSS 颜色

CSS font-stretch 属性

语法

属性值

示例

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

CSS font-stretch 属性

语法

属性值

示例

相关帖子

CSS root

CSS Position Fixed

CSS checkbox style

CSS 颜色

CSS Variables

CSS Last-Child

CSS border-image

CSS height

CSS Text-shadow

CSS 中的 SASS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器